注意：要被dataTable处理的table对象，必须有thead与tbody，而且，结构要规整（数据不一定要完整），这样才能正确处理
常用参数
'bPaginate': true, //是否显示分页
'sPaginationType': "full_numbers", //分页的类型
'iDisplayLength': 50, // 每页显示数量
'bFilter': false, //是否启动过滤、搜索功能(datatable自定义搜索功能)
'sSearch': "模糊查询：",
'bInfo': true, //是否显示左下角信息
'bAutoWidth': true, //自动宽度
'destroy': true,
'bProcessing': true, // 显示进度条
'bServerSide': true, ////是否启动服务器端数据导入 默认是false,必须配合sAjaxSource使用
"sAjaxSource": $.globaloption.server + "m.workorder.getworkorder",
"oLanguage": { //语言
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "抱歉未找到记录",
"sInfo": "共 _TOTAL_ 条数据，本页显示 _START_ 至 _END_ 条",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从总共_MAX_条记录中过滤)",
"sProcessing": "数据正在加载中,请稍后。。。",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "尾页"
}
},
bLengthChange默认为true.是否允许终端用户从一个选择列表中选择分页的页数，页数为10，25，50和100，需要分页组件bPaginate的支持
"bLengthChange": true,
"aLengthMenu": [10, 20, 30, 40, 50, 100], //定义每页显示数据数量(bLengthChange默认为true)
显示列 隐藏列开始
"oColVis": {
// "buttonText": "显示/隐藏列",
// "sSize": "auto",
// "aiExclude": [0,1,2]
// },
// "sDom": 'C<"clear"><"toolbar">rt<"bottom"i<"block"><"block"><"block">lp><"clear">',
// //显示列 隐藏列结束
"sDom":'rt<"dataTableBottomInfo"i<"block"><"block"><"block">lp><"clear">',//指定底部分页位置
bSort: false, //是否支持排序功能，默认是支持的，一般设置"aaSorting":[[1,'desc'], 指定初始化排序字段
"aaSorting": [[8, 'asc']], //默认的排序方式，第2列，升序排列asc
demo
$('#workordersDatatable').dataTable({
"bPaginate": true,
"sPaginationType": "full_numbers",
'iDisplayLength': 50,
"bFilter": false,
"sSearch": "模糊查询：",
"bInfo": true, //左下角信息
"bAutoWidth": true, //自动宽度
"destroy": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": $.globaloption.server + "m.workorder.getworkorder",
"oLanguage": { //语言
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "抱歉未找到记录",
"sInfo": "共 _TOTAL_ 条数据，本页显示 _START_ 至 _END_ 条",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从总共_MAX_条记录中过滤)",
"sProcessing": "数据正在加载中,请稍后。。。",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "尾页"
}
},
"aLengthMenu": [10, 20, 30, 40, 50, 100], // 定义每页显示数据数量(bLengthChange默认为true)
"sDom": 'rt<"bottom"i<"block"><"block"><"block">lp><"clear">',
"aaSorting": [[8, 'asc']],
"aoColumns": [
//mData是从ajax数据源获取的数字段
{
"sTitle": "手机号",
"sWidth": "80px",
"sClass": "center",
"mData": "mobile",
"bSortable": false
},
{
"sTitle": "状态",
"sWidth": "60px",
"sClass": "center",
"mData": "status",
"bSortable": false
},
],
"aoColumnDefs": [{
'aTargets': [0],
"mRender": function(data, type, full) {
return '<input type="checkbox" data="' + data + '" name="colcheckbox" />';
}
},
{
'aTargets': [3],
"mRender": function(data, type, full) {
if(full.status) {
//完成C
if(full.status == "C") {
return "完成";
}
}
}
},
{
'aTargets': [-1],
"mRender": function(data, type, full) {
var htmls = "";
if(full.status) {
var id = full.id;
var mid = full.mid;
htmls += '<a class="dealwithOrders btn btn-link" title="处理工单" onclick=\"$.workorders.dealwithOrders(' + id + ',' + mid + ')\" >处理</a>';
htmls += "<a class='reviewOrdersButton btn btn-link' title='查看工单记录' onclick=\"$.workorders.reviewOrders(this)\">工单记录</a>";
htmls += "<a class='deleteWOrders btn btn-link' title='删除工单' data='" + data + "' onclick=\"$.workorders.delete(this)\">删除</a>";
return htmls;
}
}
}
],
//从form获取参数
"fnServerParams": function(aoData) {
var mappings = {};
var sortnum = 0;
var sortcol = {};
var sortdir = {};
$.each(aoData, function(idx, value) {
if(value.name.indexOf("mDataProp_") === 0) {
mappings[value.name] = value.value;
}
if(value.name.indexOf("iSortCol_") === 0) {
sortnum++;
sortcol[value.name] = value.value;
}
if(value.name.indexOf("sSortDir_") === 0) {
sortdir[value.name] = value.value;
}
});
var sorts = [];
for(var i = 0; i < sortnum; i++) {
sorts[i] = mappings["mDataProp_" + sortcol["iSortCol_" + i]] + "," + sortdir["sSortDir_" + i];
}
if(sorts.length > 0) {
$.merge(aoData, [{
"name": "sSorts",
"value": sorts.join(";")
}]);
}
$fmarray = $("#queryform").serializeArray();
$.each($fmarray, function(idx, value) {
if(value.value && value.value !== "") {
//模糊查询
if(value.name == "username" || value.name == "mobile") {
value.value = "%" + value.value + "%";
}
}
if(value.value == "0") {
var ids = $("#as_service_query").data().ids;
if(ids)
value.value = ids.join(",");
// switch (value.name) {
// case "rgt_ids":
// var ids = $("#as_service_query").data().ids;
// if (ids)
// value.value = ids.join(",");
// break;
// }
}
});
$.merge(aoData, $fmarray);
},
//fnServerData这个是结合服务器模式的回调函数，用来处理服务器返回过来的数据
"fnServerData": function(sSource, aoData, fnCallBack) {
$.ajax({
type: "post",
dataType: "json",
url: sSource,
data: aoData,
cache: false,
success: function(result, textStatus, jqXHR) {
if(result.success) {
fnCallBack(result.data);
} else {
$.globaloption.alert(result.reason);
}
}
});
},
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$nRow = $(nRow);
$nRow.data(aData);
//完成C
if(aData.status == "C") {
$nRow.addClass('finish');
}
//tr双击事件
$nRow.unbind("dblclick").dblclick(function(e) {
e.preventDefault();
$(this).find('.dealwithOrders').trigger("click");
});
$nRow.unbind("click").click(function(e) {
//e.preventDefault();
if(!$(e.target).is("input") && !$(e.target).is("a")) {
var $Rowx = $(e.currentTarget);
if(!$Rowx.hasClass('row_selected')) {
$('tr.row_selected', $('#workordersDatatable')).removeClass('row_selected');
$Rowx.addClass('row_selected');
}
}
});
},
"fnDrawCallback": function(oSettings) {
$.globaloption.buildperms();
},
"fnInitComplete": function(oSettings, json) {
}
});
参考1：
https://blog.csdn.net/mickey_miki/article/details/8240477
sDom的设置：
https://blog.csdn.net/bill1315/article/details/12577595
标签：function,插件,full,name,JqueryDatatable,value,var,true From： https://www.cnblogs.com/songxia/p/17751485.html