Home > Web Front-end > JS Tutorial > body text

Example of processing method of datatables in js

小云云
Release: 2018-03-13 17:30:55
Original
1820 people have browsed it

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();
	};
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!