jquery datatables api

Posted 2020-09-27 心若不动，风又奈何；你若不伤，岁月无恙。

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery datatables api相关的知识，希望对你有一定的参考价值。

学习可参考：http://www.guoxk.com/node/jquery-datatables

http://yuemeiqing2008-163-com.iteye.com/blog/2006942

分别导入css和js文件

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/datatables/css/dataTables.bootstrap.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Content/datatables/js/jquery.dataTables.js"></script>
<script src="~/Content/datatables/js/dataTables.bootstrap.js"></script>

加载

html代码

<script type="text/javascript">
$(document).ready(function() {
$(\'#example\').dataTable();
});
</script>

表单

Html代码

<div class="col_2_3_right">
<div class="index_viewport">
<table id="example" cellpadding="0" cellspacing="0" border="0" width="100%">
<thead>
<tr>
<th width="20%">First name</th>
<th width="20%">Last name</th>
<th width="35%">City</th>
<th width="25%">Date</th>
</tr>
</thead>
</table>
</div>
</div>

问题：有时提示找不到datatable方法

原因

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

从后台ajax得数据重建datatables（表单的id要与json的key一致）

Js代码

$.ajax({
　　type:\'get\',//可选get
　　url:\'${projectPath}/search\',
　　data:{"channelType":$(\'#channelType\').val(),"channel":$(\'#channel\').val(),"day":$(\'#day\').val(),"startTime":$(\'#startTime\').val(),"endTime":$(\'#endTime\').val(),"database":$(\'#database\').val()},
　　dataType:\'text\',//服务器返回的数据类型可选XML ,Json jsonp script htmltext等
　　success:function(msg){
var msgObj=JSON.parse(msg);
//重新构建table
$(\'#example\').dataTable().fnClearTable(); //将数据清除
　 $(\'#example\').dataTable().fnAddData(packagingdatatabledata(msgObj),true); //数据必须是json对象或json对象数组
　
　　},
　　error:function(){
　　alert(\'error\');
　　}
})})

传入的数据

Js代码

//把服务器返回的数据转成datatable须要的格式
function packagingdatatabledata(msgObj){
var editHtml="<a class=\'btn\' data-toggle=\'modal\' href=\'#modalbackdroptrue\' >编辑</a>";
//var editHtml="<a class=\'btn\' href=\'#modalbackdroptrue\' data-toggle=\'modal\' >编辑</a>";
var a=[];
var tableName=[\'day\',\'data\',\'indata\',\'edit\'];
var banddata=storjson(msgObj[\'data\']);
var bandindata=storjson(msgObj[\'indata\']);
for(var key in banddata){
var tempObj=new Object();
tempObj.day=key;
tempObj.data=banddata[key];
tempObj.indata=bandindata[key];
tempObj.edit=editHtml;
a.push(JSON.parse(JSON.stringify(tempObj,tableName)));
}
return a;
}

传入的是一个对象数组，每个对象代表一行，对象的属性即是列

单击时得到某行的值

须要引入 jquery.dataTables.nightly.js 在附件中有

Js代码

$(document).ready(function() {
/* Init DataTables */
$(\'#example\').dataTable();
$(\'#example tbody tr\').live(\'click\', function () {
var sTitle;
var nTds = $(\'td\', this);
var sday = $(nTds[0]).text(); //得到第1列的值
var sout = $(nTds[1]).text();
var sin = $(nTds[2]).text();
} );
} );

2：详细配置

Js代码

var docrTable = $(\'#docrevisontable\').dataTable({
"bProcessing" : true, //DataTables载入数据时，是否显示‘进度’提示
"bServerSide" : true, //是否启动服务器端数据导入
"bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
"bJQueryUI" : true, //是否使用 jQury的UI theme
"sScrollY" : 450, //DataTables的高
"sScrollX" : 820, //DataTables的宽
"aLengthMenu" : [20, 40, 60], //更改显示记录数选项
"iDisplayLength" : 40, //默认显示的记录数
"bAutoWidth" : false, //是否自适应宽度
//"bScrollInfinite" : false, //是否启动初始化滚动条
"bScrollCollapse" : true, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变
"bPaginate" : true, //是否显示（应用）分页器
"bInfo" : true, //是否显示页脚信息，DataTables插件左下角显示记录数
"sPaginationType" : "full_numbers", //详细分页组，可以支持直接跳转到某页
"bSort" : true, //是否启动各个字段的排序功能
"aaSorting" : [[1, "asc"]], //默认的排序方式，第2列，升序排列
"bFilter" : true, //是否启动过滤、搜索功能
"aoColumns" : [{
"mDataProp" : "USERID",
"sDefaultContent" : "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
"bVisible" : false //此列不显示
}, {
"mDataProp" : "USERNAME",
"sTitle" : "用户名",
"sDefaultContent" : "",
"sClass" : "center"
}, {
"mDataProp" : "EMAIL",
"sTitle" : "电子邮箱",
"sDefaultContent" : "",
"sClass" : "center"
}, {
"mDataProp" : "MOBILE",
"sTitle" : "手机",
"sDefaultContent" : "",
"sClass" : "center"
}, {
"mDataProp" : "PHONE",
"sTitle" : "座机",
"sDefaultContent" : "",
"sClass" : "center"
}, {
"mDataProp" : "NAME",
"sTitle" : "姓名",
"sDefaultContent" : "",
"sClass" : "center"
}, {
"mDataProp" : "ISADMIN",
"sTitle" : "用户权限",
"sDefaultContent" : "",
"sClass" : "center"
}],
"oLanguage": { //国际化配置
"sProcessing" : "正在获取数据，请稍后...",
"sLengthMenu" : "显示 _MENU_ 条",
"sZeroRecords" : "没有您要搜索的内容",
"sInfo" : "从 _START_ 到 _END_ 条记录总记录数为 _TOTAL_ 条",
"sInfoEmpty" : "记录数为0",
"sInfoFiltered" : "(全部记录数 _MAX_ 条)",
"sInfoPostFix" : "",
"sSearch" : "搜索",
"sUrl" : "",
"oPaginate": {
"sFirst" : "第一页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "最后一页"
}
},
"fnRowCallback" : function(nRow, aData, iDisplayIndex) {
/* 用来改写用户权限的 */
if (aData.ISADMIN == \'1\')
$(\'td:eq(5)\', nRow).html(\'管理员\');
if (aData.ISADMIN == \'2\')
$(\'td:eq(5)\', nRow).html(\'资料下载\');
if (aData.ISADMIN == \'3\')
$(\'td:eq(5)\', nRow).html(\'一般用户\');
return nRow;
},
"sAjaxSource" : "../use/userList.do?now=" + new Date().getTime(),
//服务器端，数据回调处理
"fnServerData" : function(sSource, aDataSet, fnCallback) {
$.ajax({
"dataType" : \'json\',
"type" : "POST",
"url" : sSource,
"data" : aDataSet,
"success" : fnCallback
});
}
});
$("#docrevisontable tbody").click(function(event) { //当点击表格内某一条记录的时候，会将此记录的cId和cName写入到隐藏域中
$(docrTable.fnSettings().aoData).each(function() {
$(this.nTr).removeClass(\'row_selected\');
});
$(event.target.parentNode).addClass(\'row_selected\');
var aData = docrTable.fnGetData(event.target.parentNode);
$("#userId").val(aData.USERID);
$("#userN").val(aData.USERNAME);
});
$(\'#docrevisontable_filter\').html(\'<span>用户管理列表\');
$(\'#docrevisontable_filter\').append(\' <input type="button" class="addBtn" id="addBut" value="创建"/>\');
$(\'#docrevisontable_filter\').append(\' <input type="button" class="addBtn" id="addBut" value="修改"/>\');
$(\'#docrevisontable_filter\').append(\' <input type="button" class="addBtn" id="addBut" value="删除"/>\');
$(\'#docrevisontable_filter\').append(\'</span>\');
}

设置隐藏列

Js代码

var oTable = $(\'#example\').dataTable();
oTable.fnSetColumnVis( 0, false);//隐藏列

得到当前页面中的数据

var alldata=$(\'#example\').dataTable().fnGetData();//得到页面中所有对象

// Row data
$(document).ready(function() {
oTable = $(\'#example\').dataTable();

oTable.$(\'tr\').click( function () {
var data = oTable.fnGetData( this );
// ... do something with the array / object of data for the row
} );
} );

// Individual cell data
$(document).ready(function() {
oTable = $(\'#example\').dataTable();

oTable.$(\'td\').click( function () {
var sData = oTable.fnGetData( this );
alert( \'The cell clicked on had the value of \'+sData );
} );
} );

刷新表中的数据(最后一个参数是否重绘表格，false你浏览到第二页不会刷跑到第一页，但数据不会改变)

$(\'#example\').dataTable().fnUpdate( \'a\' , 1 , 1 ,false); //coll
$(\'#example\').dataTable().fnUpdate( [\'a\',\'b\'] , 1 ); //row

得到当前浏览的datatables页码

Js代码

var tableSetings=$(\'#example\').dataTable().fnSettings()
var paging_length=tableSetings._iDisplayLength;//当前每页显示多少
var page_start=tableSetings._iDisplayStart;//当前页开始
var page=Div(page_start,paging_length);
function Div(exp1, exp2) { //整除
var n1 = Math.round(exp1); //四舍五入
var n2 = Math.round(exp2); //四舍五入
var rslt = n1 / n2; //除
if (rslt >= 0) {
rslt = Math.floor(rslt); //返回小于等于原rslt的最大整数。
}
else {
rslt = Math.ceil(rslt); //返回大于等于原rslt的最小整数。
}
return rslt;
}

设置datatables跳转到某页

Js代码

$(\'#example\').dataTable().fnPageChange(page);

注意：由于后台数据可能已经被其它人改变（记录个数与现在前台不一致），所以数据fnUpdate时须要判断前后端数据的一致性，只刷新前台有的数据的状态

dom:

http://datatables.net/release-datatables/examples/advanced_init/language_file.html国际化

一：api

bAutoWidth ：启用或禁用自动列宽度的计算。

默认值	true
类型	boolean

$(document).ready( function () {
$(\'#example\').dataTable( {
"bAutoWidth": false //关闭后，表格将不会自动计算表格大小，在浏览器大化小化的时候会挤在一坨
} );
} );

bDeferRender ：根据官网的介绍翻译过来就是，延期渲染，可以有个速度的提升，当datatable 使用Ajax或者JS源表的数据。这个选项设置为true,将导致datatable推迟创建表元素每个元素,直到他们都创建完成——本参数的目的是节省大量的时间。

默认值：	false
类型：	boolean

$(document).ready( function() {
var oTable = $(\'#example\').dataTable( {
"sAjaxSource": "sources/arrays.txt",
"bDeferRender": true //这个参数我个人没有使用过，到底是不是这个效果，大家自己去尝试一下
} );
} );

bFilter ：这个很容易明白，启用或禁用过滤数据。在datatable过滤是“智能”,它允许用户最终输入多个关键字(空格分隔)，和每一行数据匹配,即使不是在被指定的顺序(这允许匹配多个列)。注意,如果您希望使用过滤，在datatable中必须设置为true，如果要删除默认过滤输入框和留住过滤功能,请使用{ @link DataTable.defaults.sDom }。这个最后一句不明白，不知道大家怎么理解。

默认值：	true
类型：	boolean

$(document).ready( function () {
$(\'#example\').dataTable( {
"bFilter": false
} );
} );

bJQueryUI ：这个不用多说了，一看就懂，启用jQuery UI样式，(需要在页面添加jQuery的样式文件)。

默认值：	false
类型：	boolean

$(document).ready( function() {
$(\'#example\').dataTable( {
"bJQueryUI": true
} );
} );

bLengthChange ：开启一页显示多少条数据的下拉菜单，允许用户从下拉框(10、25、50和100)，注意需要分页(bPaginate：true)。

默认值：	true
类型：	boolean

$(document).ready( function () {
$(\'#example\').dataTable( {
"bLengthChange": false,

bPaginate ：开启分页功能，如果不开启，将会全部显示

默认值：	true
类型：	boolean

$(document).ready( function () {
$(\'#example\').dataTable( {
"bPaginate": false
} );
} );

bProcessing ：开启读取服务器数据时显示正在

以上是关于jquery datatables api的主要内容，如果未能解决你的问题，请参考以下文章

JQuery插件datatables相关api

最全的jquery--datatables--API 属性表

jquery datatables api

最全的jquery--datatables--API 使用详解

jquery datatables api