function getCommonOptions() { var options = new Object(); options.searching = true; options.ordering = true; return options; } var aOptions = getCommonOptions(); aOptions.scrollY = true; $('#a).DataTable(aOptions); var bOptions = getCommonOptions(); bOptions .scrollY = false; $('#b).DataTable(bOptions);
这样，A和B都支持了检索和排序，但是A支持垂直滚动，但是B不支持垂直滚动。
所以首先可以看下一个公用的通过Ajax获取后端数据的DT是如何配置的。
/**通用列表**/ function createCommonTableOptions() { var oTemp = new Object; // 是否允许检索 oTemp.searching = true; // 是否允许排序 oTemp.ordering = true; // 默认排序 oTemp.order = [[1,'desc']]; // 是否显示情报 就是"当前显示1/100记录"这个信息 oTemp.info = true; // 是否允许翻页，设成false，翻页按钮不显示 oTemp.paging = true; // 水平滚动条 oTemp.scrollX = false; // 垂直滚动条 oTemp.scrollY = true; // 是否可以选择每页展示的Item数量 oTemp.lengthChange = true; // 选择每页展示数量的选项 oTemp.lengthMenu = [10, 25, 50, 75, 100]; // 每页展示数据条数默认值 oTemp.pageLength = 10; //翻页按钮样式 // numbers:数字 // simple:前一页，后一页 // simple_numbers:前一页，后一页，数字 // full:第一页，前一页，后一页，最后页 //full_numbers:第一页，前一页，后一页，最后页，数字 //first_last_numbers:第一页，最后页，数字 oTemp.pagingType = "simple_numbers"; // 行样式应用 指定多个的话，第一行tr的class为strip1，第二行为strip2，第三行为strip3. // 第四行以后又开始从strip1循环。。。 如果想指定成斑马条状，这里的class必须指定为2个。 oTemp.stripeClasses = ['line_1', 'line_2']; // 自动列宽 oTemp.autoWidth = true; // 是否表示 "processing" 加载中的信息，这个信息可以修改 oTemp.processing = true; // 每次创建是否销毁以前的DataTable,默认false oTemp.destroy = false; // 控制表格各种信息的表示位置（比较复杂） 默认:lfrtip // 具体参考：https://datatables.net/reference/option/dom oTemp.dom = "lrtip"; // language 用来定义展示信息的内容，如加载中显示的提示、当前页显示多少条时的提示、翻页按钮上的文字等等 oTemp.language = { "processing": "翻页中。。。。", // 当前页显示多少条 "lengthMenu": "当前显示 _MENU_ 条记录", // _START_（当前页的第一条的序号） ,_END_（当前页的最后一条的序号）,_TOTAL_（筛选后的总件数）, // _MAX_(总件数),_PAGE_(当前页号),_PAGES_（总页数） "info": "当前第 _PAGE_ 页, 共 _PAGES_ 页, 共 _MAX_ 条数据", "infoEmpty": "0条数据", "infoFiltered": "", // 没有数据的显示（可选），如果没指定，会用zeroRecords的内容 "emptyTable": "没有记录", // 筛选后，没有数据的表示信息，注意emptyTable优先级更高 "zeroRecords": "没有符合条件的记录", // 千分位的符号，只对显示有效，默认就是"," 一般不要改写 //"thousands": "'", // 小数点位的符号，对输入解析有影响，默认就是"." 一般不要改写 //"decimal": "-", // 翻页按钮文字控制 "paginate": { "first": "第一页", "last": "最后一页", "next": "上一页", "previous": "下一页" }, "loadingRecords": "正在加载中，请稍后。。。" }; // 默认是false // 如果设为true，将只渲染当前也的html，速度会很快，但是通过API就访问不到所有页的数据，有利有弊 //"deferRender": false, // 服务器端处理方式 oTemp.serverSide = true; return oTemp; }
每行选项都加了注释，如果希望了解更详细，可以参考官方的用户手册。注意serverSide一定要设置为true。
一个项目中的多个表最大的不同是啥呢？首先，肯定是他们的列不同，如果列相同的话就成了相同的表格了。其次，因为列不同，所以需要绑定的数据以及数据的接口肯定也不同。
通过一个具体的例子看一下。我要实现一个功能，手机通过定时轮询的方法查看服务端向他发送的命令(比如让手机上报自己的定位、上传自己的通话记录等)。那这个服务端向手机发送的命令，我需要一个后台管理平台进行管理，其中一个表格就是要展示所有的命令，包括命令内容、创建时间和执行时间等。
首先看下官方给出的前端通过Ajax向后端服务传递的入参格式：
名称
类型
描述
draw
integerJS