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 += '+ data[i] + '" >';
var content = data[i];
if (content.length > 35) {
content = content.substring(0, 35) + '...';
}
html += content + '';
}
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 = ' '+
' row.id + '">'+ I18n.system_opt_del +'';
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 = $("");
$("#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();