jquery dataTables表格的使用

第一步引用jquery.dataTables.min.js文件和dataTables.bootstrap.min.js文件

第二步在文件中建一个表格

<table id="account_list" class="table table-bordered table-striped" width="100%" >                    
   <thead>
	    <tr>
          <th name="id">${I18n.account_Id}</th>
          <th name="username" >${I18n.account_name}</th>
		  <th name="bankAccount">${I18n.task_bankAccount}</th>
		  <th name="createTime" >${I18n.account_startTime}</th>
	      <th>${I18n.system_opt}</th>
	    </tr>
	</thead>
	<tbody></tbody>
	<tfoot></tfoot>
</table>

第三步在js访问ajax渲染数据

  var accountTable = $("#account_list").dataTable({
		"deferRender": true,
		"processing" : true,
	    "serverSide": true, //ajax请求数据需要服务器端分页
		"ajax": {
			url: base_url + "/account/list",
			type:"post",
			contentType: 'application/json; charset=UTF-8', // 注意这里是contentType，不是Content-Type（后者是大写的）
			//
			xhrFields: {
                withCredentials: true  //解决跨服务传递时不传递cookie的问题，允许携带证书
			},
			crossDomain: true,  //允许跨域
			// dataType: 'json',
	        data : function ( d ) {
	        	var obj = {};
	        	obj.username = $('#username').val();//另外写的搜索栏的数据
				obj.pageNo = (d.start/d.length + 1); // 页数
		    	obj.pageSize = d.length; //每页的长度
                return JSON.stringify(obj);
            }
        },
        // "data": dataSet, //使用静态数据渲染的时候用的到，要把serverSide和ajax都注释掉
	    "searching": false,
	    "ordering": false,
        //"scrollX": true,	// scroll x，close self-adaption
        'dom': 
        "<'row'<'col-sm-12 custom-table'tr>>" +
        "<'row'<'col-sm-12 col-md-3'i><'col-sm-12 col-md-2'l><'col-sm-12 col-md-7 custom-pagation'p>>",//将表格和分页等组件重新布局
	    "columns": [
	                {
	                	"data": 'id',
						"bSortable": false,
						"visible" : true,
						"width":'10%'
					},
	                {
                        "data": 'username',
                        "visible" : true,
						"width":'12%'
					},
					
					{
						"data": 'createTime',
						"visible" : true,
						"width":'10%',
					},
					
                      //操作栏
	                {
						"data": I18n.system_opt ,
						"width":'24%',
	                	"render": function ( data, type, row ) {
	                		return function(){

								tableData['key'+row.id] = row;
								var html = `<button type="button" class="btn btn-primary m_r4px table_opt_btn btn-sm delete" _id="${row.id}">${I18n.system_opt_delete}</button>`
	                			return html;
							};
	                	}
	                }
	            ],
		"language" : {
			"sProcessing" : I18n.dataTable_sProcessing ,
			"sLengthMenu" : I18n.dataTable_sLengthMenu ,
			"sZeroRecords" : I18n.dataTable_sZeroRecords ,
			"sInfo" : I18n.dataTable_sInfo ,
			"sInfoEmpty" : I18n.dataTable_sInfoEmpty ,
			"sInfoFiltered" : I18n.dataTable_sInfoFiltered ,
			"sInfoPostFix" : "",
			"sSearch" : I18n.dataTable_sSearch ,
			"sUrl" : "",
			"sEmptyTable" : I18n.dataTable_sEmptyTable ,
			"sLoadingRecords" : I18n.dataTable_sLoadingRecords ,
			"sInfoThousands" : ",",
			"oPaginate" : {
				"sFirst" : I18n.dataTable_sFirst ,
				"sPrevious" : I18n.dataTable_sPrevious ,
				"sNext" : I18n.dataTable_sNext ,
				"sLast" : I18n.dataTable_sLast
			},
			"oAria" : {
				"sSortAscending" : I18n.dataTable_sSortAscending ,
				"sSortDescending" : I18n.dataTable_sSortDescending
			}
		}
	});

注意，每一栏的宽度需要进行设定，保证加起来100%