Home  >  Article  >  Web Front-end  >  Example of processing method of datatables in js

Example of processing method of datatables in js

小云云
小云云Original
2018-03-13 17:30:551842browse

This article mainly shares with you examples of js datatables processing methods, hoping to help everyone.

/**
	 * 初始化表单
	 */
	me.initDatatable = function() {
		me.interns0301Table = $("#interns0301Table").DataTable({
			// 让表头与表格对齐
	        "autoWidth": true,
	        "processing": true,
	        "serverSide": true,
	        // 表格数据减少时,表格的高度也跟着减少
	        "scrollCollapse": true, 
	        "ajax" : {
	        	"url": $ctx + "/interns0301/queryList",
	        	"type": "post",
	        	"data" : function(params) {
					// 页面显示记录条数,在页面显示每页显示多少项的时候
					params.pageSize = params.length;
					// 当前页码
					params.pageNo = (params.start / params.length) + 1;
					// 序列化表单元素为JSON对象
					var dataJson = eims.serialize('interns0301Form');
					$.extend(params, dataJson);
					return params;
				},
				"dataType" : "json"
	        },
			 "columnDefs": [
			                	{                          
					              "defaultContent": "",
					               "targets": "_all"
				                 }
				          ],
	    	"sPaginationType": "full_numbers",
                  // 将后台得到的值放进对应字段中
	        "columns": [ 
	                 {
                   // 全选框,传入id等参数
	        	  "data": null,sClass: "text-center","render": function(data, type, row, meta){
	        	  return &#39;<input class="checkall"   type="checkbox"><input type="text" hidden value="&#39;+row.id+&#39;">&#39;;
	  		  }},
	  	         {"data": "groupNumber",sClass: "text-center" ,"render": function ( data, type, row, meta ) {
    				return &#39;<a href="#" onclick="javascript:interns.interns0301.showInterns0302Update(\&#39;&#39; + row.id+ &#39;\&#39;)">&#39; + data + &#39;</a>&#39;;}},		  		  
	  		  {"data": "groupName",sClass: "text-center"},
	                  {"data": "projectNumber",sClass: "text-center"},
	                  {"data": "projectSimname",sClass: "text-center"},
			  {"data": "unitNumber",sClass: "text-center"},
			  {"data": "unitSimname",sClass: "text-center"},
			  {"data": "entryDate",sClass: "text-center"},	          
	        ],
	        // 回调函数,全选框的处理
	        "drawCallback": function(settings){
  	        	$("#selectAll").prop("checked", false);
  	        	me.checkBox();
  	        }	        
		});
		// 加载页面
		me.interns0301Table.ajax.reload();
	};

Related recommendations:

JQuery.dataTables table plug-in jumps to the specified page example sharing

Usage and how to use the jQuery plug-in datatables Detailed explanation of paging code

What are jQuery datatables? How to use datatables?

The above is the detailed content of Example of processing method of datatables in js. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn