脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-使用jquery.datatable.js遇到的一些坑，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
使用jquery.datatable.js遇到的一些坑，如果不是维护老项目或者在老项目上二次开发尽量不要用这个表格插件。
为什么呢？
1.老项目基本用的是1.09及之前的版本；这个插件1.09和1.10之后的版本命名及加载方式，完全改变了；1.09版本的API
2.这个插件的sdom参数有人说强大，但是我觉得这个参数对于UI优化简直是个大坑
3.一个写的比较全的的API博客
参数配置：https://blog.csdn.net/zhu_xiao_yuan/article/details/51252300
回调函数：https://www.cnbLOGs.COM/zhangwei595806165/p/3701463.htML
列举遇到的一些问题及解决办法
1.所有页面表格的公共初始化方法：1.10有个default方法，1.09之前是木有的；但是又不想重复js代码维护起来也麻烦，有俩种方式一、 反压缩jQuery.datatable.js在2050行左右修改代码如下：浅红色的是我修改的一些公共初始化
j.defaults = {
spaginationTyPE: "bootstrap",
bLengthChange: true,
bPaginate: true,
iDisplayStart: 0,
iDisplayLength: 10,
aLengthMenu: [10, 20, 50],
bAutoWidth: false,
bFilter: false,
bDestroy:true,
bPRocessing: true,
bretrieve: true,
bServerSide: true,
bSort: false,
iCookieDuration: 60 * 60 * 24 * 7,
oLanguage: {
sInfo: "当前第 _START_ - _END_ 条 共计 _total_ 条",
sInfoEmpty: "当前第 0 - 0条 共计 0 条",
sInfoFiltered: "(从 _MAX_ 条记录中过滤)",
sLengthMenu: "每页显示 _MENU_条",
sLoadingRecords: "加载中...",
sProcessing: "加载中...",
sSeArch: "搜索:",
sZeroRecords: "没有找到符合条件的数据",
SEMptyTable: "没有找到符合条件的数据",
oPaginate: {
sFirst: "首页",
sLast: "尾页",
sNext: "下一页",
sPrevious: "上一页"
},
oAria: {
sSortAscending: ": activate to sort column ascending",
sSortDescending: ": activate to sort column descending"
},
sInfoPostFix: "",
sInfoThousands: ",",
sUrl: "",
},
aoColumnDefs: [{
sDefaultContent: '',
aTargets: ['_all']
}],
};
二、在公共js中对表格都加载一次
这种方式有点不好就是当我不需要展现表格的时候它也请求了一次后台；span12-pag{width：96%}是自己写的一个样式，插件的分页条长度超过了表格宽度
$(".datatable").datatable（{
"sScrollY": 474, // DataTables的高
"sDom": "<'box-content'<'span12'l>tr<'span12 span12-pag'p>>",
}）
2.1.09版本没有提供一个异步加载的方法，以下自己封装的一个
// 异步刷新表格数据
$.fn.dataTableExt.oApi.fnReloadAjax = function(oSettings) {
this.fnClearTable(false);
this.oApi._fnProcessingDisplay(oSettings, true);
VAR that = this;
$.getJSON(oSettings.sAjaxSource, null, function(json) {
if(json.aaData!=null) {
for(var i = 0; i < json.aaData.length; i++) {
that.oApi._fnAddData(oSettings, json.aaData[i]);
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
that.fnDraw();
that.oApi._fnProcessingDisplay(oSettings, false);
}
});
}
3.自己封装的分页方法，插件提供的俩中默认方式不符合要求
// 分页方法 bootstrap 形式
$.extend($.fn.dataTableExt.oPagination, {
"bootstrap": {
"fnInIT": function(oSettings, nPaging, fnDraw) {
var oLang = oSettings.oLanguage.oPaginate;
var fnClickHandler = function(e) {
e.preventDefault();
if(oSettings.oApi._fnPageChange(oSettings,e.data.action)) {
fnDraw(oSettings);
}
};
$(nPaging).addClass('pagination')
.append('
4.当有tab标签页的页面并且有多个表格时，切换tab标签数据展示不是默认第一页：
我是reload表格后，用jquery模拟了一个a标签点击事件，选择器对不同表格可能要略做修改
$(".dataTables_paginate").find("ul").eq(1).children("li").children("a").eq(1).click();
5.bvisible参数，使用该参数需要在需隐藏的列上加上"bvisible":false,通过fnSetColumnVis来控制列的显隐，但是我发现每次调用都请求了一次后台；
有种取巧方式：是将后台数据封装成一个统一的对象名返回，通过选择器修改表头的列名
6.后台返回分页数据
function inittable(urlRwrite) {
objTable = $("#resourceTable").dataTable({
"sScrollY": 530, // DataTables的高
'bFilter': true, // 是否使用内置的过滤功能
"sDom": "<'box-content'<'span6'f><'span6'l>tr<'span12 span12-pag'p>>",
"oLanguage": { // 汉化
"sSearch": "资源名称/URL：",
},
"sAjaxSource":urlRwrite==undefined? "/shore/admin/role/listResource.ajax?projectId=0&T=" + new Date().getTime():urlRwrite,
"aoColumns": [{
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
var resourceId = oData.fResourceId;
var str = "";
$(nTd).html(str);
},
"sWidth": "6%"
}, {
";mDataProp": "fResourceName",
"sWidth": "14%"
}, {
"mDataProp": "fResourceUrl",
"sWidth": "24%"
}, {
"mDataProp": "fLastUpdatedBy",
"sWidth": "18%"
}, {
"mDataProp": "fLastUpdatedTime",
"sWidth": "15%"
}, {
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
var resourceId = oData.fResourceId;
var str = "";
if(projectType == 1) {
str += "";
str += "";
}else{
str += "";
}
$(nTd).html(str);
},
}],
"fnServerData": function(sSource, aoData, fnCallback) {
var iDisplayStart = 0;
var iDisplayLength = 10;
var sSearch = '';
$.each(aoData, function(i, o) {
if(o.name == "iDisplayStart") {
iDisplayStart = o.value;
}
if(o.name == "iDisplayLength") {
iDisplayLength = o.value;
}
if(o.name == "sSearch") {
sSearch = o.value;
}
});
$.ajax({
"type": 'get',
"url": sSource,
"dataType": "json",
"data": {
iDisplayStart: iDisplayStart,
iDisplayLength: iDisplayLength,
sSearch: sSearch
},
"success": function(resp) {
fnCallback(resp);
},
"complete": function(XMLHttpRequest,
textStatus) {
var data = XMLHttpRequest.responseText;
if(data == "timeout") {
window.location = "/";
}
}
});
},
"fnDrawCallback": function() { // 复选框反选操作
$.each(checkedResourceIds, function(i, o) {
if(deleteResourceIds.indexOf(o) == -1) {
$("#resourceId-" + o).prop("checked", true);
$("#BTn1-" + o).attr("disabled", false);
$("#btn2-" + o).attr("disabled", false);
$("#btn3-" + o).attr("disabled", false);
$("#btn1-" + o).attr("title", "");
$("#btn2-" + o).attr("title", "");
} else {
$("#resourceId-" + o).prop("checked", false);
}
});
$.each(addResourceIds, function(i, o) {
$("#resourceId-" + o).prop("checked", true);
$("#btn1-" + o).attr("disabled", false);
$("#btn2-" + o).attr("disabled", false);
$("#btn3-" + o).attr("disabled", false);
$("#btn1-" + o).attr("title", "");
$("#btn2-" + o).attr("title", "");
});
},
"fnRowCallback": function (nRow, aData, iDisplayIndex) {
$('td:eq(1)', nRow).html(escapeHtml(aData.fResourceName));
$('td:eq(2)', nRow).html(escapeHtml(aData.fResourceUrl));
$('td:eq(4)', nRow).html(aData.fLastUpdatedTime.substring(0,aData.fLastUpdatedTime.length-2));
}
})
}
7.定义列框时只在表头定义width是无效的，必须在列中定义："sWidth": "14%"
8.对表格数据的字符转码和数据格式化可以在fnRowCallback中进行操作
9.对表格定义的复选框翻页无法选中问题可在fnDrawCallback对表格进行操作
10.当表格的异步参数改变时必须修改url否则无法将新的参数传递至后台
11.不知道为啥使用fnClearTable(false)方法并没有清楚数据，我使用了中取巧方式$("tbody").empty("");
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-使用jquery.datatable.js遇到的一些坑全部内容，希望文章能够帮你解决javascript代码实例教程-使用jquery.datatable.js遇到的一些坑所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。