Jquery datatables 从服务端获取数据并分页，及修改搜索框为按下回车或点击按钮再执行搜索

1、datatables 从服务端获取数据并分页

// init date tables var userListTable = $("#jobgroup_list").dataTable({ "deferRender": true, "processing" : true, "serverSide": true, "ajax": { url: base_url + "/jobgroup/pageList", type:"post", data : function ( d ) { var obj = {}; // obj.id = $('#groupId').val(); // obj.order = $('#order').val(); // obj.appName = $('#appName').val(); obj.title = $('#jobgroup_list_filter input[type=search]').val(); // obj.addressType = $('#addressType').val(); // obj.registryList = $('#registryList').val(); obj.start = d.start; obj.length = d.length; return obj; } }, "searching": true, // "searchDelay": 500, // 延迟搜索 "ordering": false, //"scrollX": true, // scroll x，close self-adaption "columns": [ { "data" : null, "width": '5%', "render" : function(data, type, full, meta){ return meta.row + 1 + meta.settings._iDisplayStart; } }, // 序号 { "data": 'id', "visible" : true, "width":'10%' }, { "data": 'order', "visible" : true, "width":'10%' }, { "data": 'appName', "visible" : true, "width":'20%' }, { "data": 'title', "visible" : true, "width":'20%' }, { "data": 'addressType', "visible" : true, "width":'10%', "render": function ( data, type, row ) { if (data == 0) { return I18n.jobgroup_field_addressType_0 } else { return I18n.jobgroup_field_addressType_1 } } }, { "data": 'registryList', "visible" : true, "width":'15%', "render": function ( data, type, row ) { if (data != null && data.length > 0) { var html = ''; for(var i = 0 ; i < data.length ; i++) { html += '<span class="badge bg-green" title="' + data[i] + '" >'; var content = data[i]; if (content.length > 35) { content = content.substring(0, 35) + '...'; } html += content + '</span>'; } return html; } else { return ''; } } }, { "data": I18n.system_opt , "width":'10%', "render": function ( data, type, row ) { return function(){ // html // tableData['key'+row.id] = row; var html = '<button class="btn btn-warning btn-xs update" ' + 'id="' + row.id + '"' + 'appName="' + row.appName + '"' + 'title="' + row.title + '"' + 'order="' + row.order + '"' + 'addressType="' + row.addressType + '"' + 'addressList="' + row.addressList + '"' + '>'+ I18n.system_opt_edit +'</button> '+ '<button class="btn btn-danger btn-xs remove" id="' + row.id + '">'+ I18n.system_opt_del +'</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 } } });

2、修改搜索框为按下回车或点击按钮再执行搜索

// the filter div has the id of your table plus "_filter. var $searchBox = $("#jobgroup_list_filter input[type='search']"); // remove current handlers $searchBox.off(); $searchBox.attr("placeholder", I18n.jobgroup_field_title); // 按下enter执行搜索 $searchBox.on("keyup" ,function(evtObj){ if(evtObj.keyCode == 13){ $("#jobgroup_list").DataTable().search($searchBox.val()).draw(); } }); // 搜索框后面加按钮搜索 $btn = $("<button class='btn btn-info' type='button' style='padding: 4px 10px;'>Go</button>"); $("#jobgroup_list_filter").append($btn); $btn.click(function(evtObj){ $("#jobgroup_list").DataTable().search($searchBox.val()).draw(); })

注：对应init date tables中需要：

obj.title = $('#jobgroup_list_filter input[type=search]').val();