Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
链接：http://www.datatables.club/
本人无聊时发现的一款用来显示数据的一款插件，很方便好用，可以控制显示条数，可以根据显示数据进行任意条件的查询，可以控制列进行排序，可以控制分页(注意这里的分页我认为是一个假分页，它需要将所有数据查询到以后再进行分页，数据量较大请酌情使用！)。具体的功能不再一一叙述，直接看如何使用吧！
使用方法：
一、先引用需要用到的js和css，具体可以在Datatables官网进行下载。
二、在页面绘制一个表格(下方代码仅供参考！)
| 产品编号 | 产品名称 | 产品单价(¥) | 产地 | 产品数量 | 产品尺寸 | 加入时间 | 内容摘要 | 操作 |
|---|
三、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 '';
}
},
{
"targets": 9,
"mRender": function (data, type, row) {
return '';
}
}
],
});
}
如上三个步骤写完后就可以显示你想要显示的数据了，如感觉此文帮助到您了，求点个赞，如觉得哪里有问题，欢迎留言一起探讨！