一款比较强大的jquery表格插件Datatables

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

链接：http://www.datatables.club/

本人无聊时发现的一款用来显示数据的一款插件，很方便好用，可以控制显示条数，可以根据显示数据进行任意条件的查询，可以控制列进行排序，可以控制分页(注意这里的分页我认为是一个假分页，它需要将所有数据查询到以后再进行分页，数据量较大请酌情使用！)。具体的功能不再一一叙述，直接看如何使用吧！

使用方法：

一、先引用需要用到的js和css，具体可以在Datatables官网进行下载。

二、在页面绘制一个表格(下方代码仅供参考！)

<table class="table table-striped table-bordered table-hover" id="sample-table">
<thead>
<tr id="tr1">
<th width="25px"><label><input type="checkbox" class="ace"><span class="lbl"></span></label></th>
<th width="100px">产品编号</th>
<th width="160px">产品名称</th>
<th width="120px">产品单价(&yen;)</th>
<th width="80px">产地</th>
<th width="80px">产品数量</th>
<th width="80px">产品尺寸</th>
<th width="140px">加入时间</th>
<th width="180px">内容摘要</th>
<th width="140px">操作</th>
</tr>
</thead>
<tbody id="body"></tbody>
</table>

三、jQuery控制表格初始化

jQuery(function ($) {

oTable1 = $('#sample-table').dataTable({
"aaSorting": [[1, "desc"]],//默认第几个排序索引从0开始
"bAutoWidth": false,//这里是关闭了自动改变宽度
"bStateSave": true,//状态保存

//我这里是通过ajax向后台调取数据
ajax: {
url: "",//路径
dataSrc: function (json) {

//这里我返回的是json对象
var data = JSON.parse(json);
return data;
},
dataType: 'json',
type: "get",
},

//这里设置每行显示的数据，就是和实体的属性一致，如果没有数据则为null
"columns": [
{ "data": null },
{ "data": "SerialNumber" },
{ "data": "TradeName" },
{ "data": "Price" },
{ "data": "Place" },
{ "data": "Number" },
{ "data": "Size" },
{ "data": function (obj) { return obj.JoinTime.replace("T", " "); } },//这是我显示时间时去除自动生成的T
{ "data": "Synopsis" },
{ "data": null }
],

//此属性时设置行内显示除数据以外，如按钮，复选框
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [0, 2, 4, 5, 6, 8, 9] },// 制定列不参与排序z
{
"targets": 0,
"mRender": function (data, type, row) {
return '<label><input type="checkbox" name="ck" class="ace" value="' + row.ID + '"><span class="lbl"></span></label>';
}
},
{
"targets": 9,
"mRender": function (data, type, row) {
return '<a title="编辑" onclick="member_edit(\'编辑\',\'/Home/member_add\',' + row.ID + ',\'1000\',\'560\')" href="javascript:;" class="btn btn-xs btn-info"><i class="icon-edit bigger-120"></i></a><a title="删除" href="javascript:;" onclick="member_del(' + row.ID + ')" class="btn btn-xs btn-warning"><i class="icon-trash bigger-120"></i></a>';
}
}
],
});
}

如上三个步骤写完后就可以显示你想要显示的数据了，如感觉此文帮助到您了，求点个赞，如觉得哪里有问题，欢迎留言一起探讨！