datatables配合bootstrap样式进行ajax数据交互并生成表格
林鑫 2018-07-18
目前做的项目用到datatables这个插件，总结下来：
一、引用的文件
dataTables.bootstrap.css
dataTables.bootstrap.js
！！可以到本人的资源库中免费下载
二、html结构
因为使用了bootstrap，class="table table-striped table-bordered“为bootstrap样式
<table id="tenantList" class="table table-striped table-bordered table-hover table-tr"" style="overflow: visible;">
<thead class="table_tit">
<tr>
<th class="table-checkbox"><input type="checkbox" class="group-checkable" data-set="#example1.checkboxes" /></th>
<th>租户名称</th>
<th>状态</th>
<th>联系人</th>
<th>服务目录</th>
<th>价格系数</th>
<th>到期时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
注意！必须要有id的值哦，后面的table初始化会根据这个id的值找到table，并将数据加载到<tbody></tbody>中
三、dataTables参数解析
1、初始化：$("#tenantList").DataTable(this.config);
2、this.config = {
/*
* 默认为false
* 当表格在处理的时候（比如排序操作）是否显示“处理中...”
* 当表格的数据中的数据过多以至于对其中的记录进行排序时会消耗足以被察觉的时间的时候，该选项会有些用处
*/
"bProcessing":true,
/*
* 默认为false
* 配置DataTable使用服务器端处理，注意，sAjaxSource参数必须指定，以便给DataTable一个为每一行获取数据的数据源
*/
"bServerSide":true,
/*
* 默认为true
* 是否允许终端用户从一个选择列表中选择分页的页数，页数为10，25，50和100，需要分页组件bPaginate的支持
*/
"bLengthChange":true,
/*
* 默认为true
* 是否对数据进行过滤，数据过滤是十分灵活的，允许终端用户输入多个用空格分隔开的关键字
* 匹配包含这些关键字的行，即使关键字的顺序不是用户输入的顺序，过滤操作会跨列进行匹配，关键字可以分布在一行中不同的列
* 要注意的是如果你想在DataTable中使用过滤，该选项必须设置为true，如果想移除默认过滤输入框但是保留过滤功能，请设置为false(API没写，推测是false)
*/
"bFilter":true,
/*
* 自定义语言设置
*/
"oLanguage":{
/*
* 默认值为Show _MENU_ entries
* 描述当分页组件的下拉菜单的选项被改变的时候发生的动作，'_MENU_'变量会被替换为默认的10，25，50，100
* 如果需要的话可以被自定义的下拉组件替换
*/
"sLengthMenu": "每页显示 _MENU_ 条",
/*
* 默认值activate to sort column ascending为
* 当表格中没有数据（无视因为过滤导致的没有数据）时，该字符串年优先与sZeroRecords显示
* 注意这是个可选参数，如果没有指定，sZeroRecrods会被使用（既不是默认值也不是给定的值）
*/
"sEmptyTable": "暂时没有任何数据记录",
/*
* 默认值为Processing...
* 当表格处理用户动作（例如排序或者类似行为）的时候显示的字符串
*/
"sProcessing": "正在载入数据...",
/*
* 默认为Search:
* 描述用户在输入框输入过滤条件时的动作，变量'_INPUT_',如果用在字符串中
* DataTable会使用用户输入的过滤条件替换_INPUT_为HTML文本组件，从而可以支配它（即用户输入的过滤条件）出现在信息字符串中的位置
* 如果变量没有指定，用户输入会自动添加到字符串后面
*/
"sSearch": "搜索 _INPUT_",
/*
* 默认值为Showing _START_ to _END_ of _TOTAL_ entries
* 该属性给终端用户提供当前页面的展示信息，字符串中的变量会随着表格的更新被动态替换，而且可以被任意移动和删除
*/
"sInfo": "( 共 _TOTAL_ 条 )",
/*
* 默认值为No matching records found
* 当对数据进行过滤操作后，如果没有要显示的数据，会在表格记录中显示该字符串
* sEmptyTable只在表格中没有数据的时候显示，忽略过滤操作
*/
"sZeroRecords": "暂时没有任何数据记录",
/*
* 默认值为Showing 0 to 0 of 0 entries
* 当表格中没有数据时展示的表格信息，通常情况下格式会符合sInfo的格式
*/
"sInfoEmpty": "No entries to show",
},
/*
* sDom
* 默认值为lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true)
* 该初始化属性用来指定你想把各种控制组件注入到dom节点的位置（比如你想把分页组件放到表格的顶部）
* DIV元素（带或者不带自定的class）可以添加目标样式，下列语法被使用
* 可供使用的选项
* 'l' - 长度改变
* 'f' - 过滤输入
* 't' - 表格
* 'i' - 信息
* 'p' - 分页
* 'r' - 处理
* 可供使用的常量
* 'H' - jQueryUI theme "header" classes('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix')
* 'F' - jQueryUI theme "footer" classes ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix')
* 需要的语法
* '<' 和 '>' - div元素
* '<"class" and '>' - 带有class属性的div元素
* '<"#id" and '>' - 带有id属性的div元素
* 例子
* '<"wrapper"flipt>'
* '<lf<t>ip>'
*/
sDom:"<'row'r><'table-scrollable't><'row'<'col-md-3 col-sm-12'li><'col-md-2 col-sm-12 table-bottom-bar'><'col-md-7 col-sm-12'p>>",
/*
* sAjaxSource
* 默认为null
* 该参数用来向DataTable指定加载的外部数据源（如果想使用现有的数据，请使用aData）
* 可以简单的提供一个可以用来获得数据url或者JSON对象，该对象必须包含aaData，作为表格的数据源
*/
sAjaxSource : "tenant.html",
/*
*dataTables每一行数据
*/
aoColumns : [
{
"bSortable" : false, //是否在某一列上开启排序，默认true
/*
* mData
* 默认为null,使用自动计算的列标
* 该属性可以从任何JSON格式数据源读取属性，包括深层网状的对象和属性，
* 有几种不同的传递方式可以影响mData的行为
* 整型：被当作数据源的数组下表，是DataTable使用的默认行为（每列递增）
* 字符串类型：被当作从数据源获取的对象的属性名，注意你可以使用Javascript点号访问符去访问深层次的属性或数组
* null：sDafaultContent选项会被使用到单元格上，（默认是空字符串，当生成可编辑列、可删除列的时候可以使用该属性）
* 函数：当表格获取或者设置单元格时被调用的函数，函数有三个参数
* {array|object}:该行的数据源
* {string}:调用数据请求的类型，设置数据时是'set'，收集数据时是'filter','display','type','sort'
* {*}:当第二个参数是set的时候，要被设置的数据
* 当类型是'set'的时候，该函数不需要返回一个值，除此之外，返回值是可以用来请求数据的
*/
"mData": "tenantid",
'sClass':'center', //默认值为空字符串,该列的每一个单元格被赋予的class
/*
* 无默认值
* 自定义列中每个单元格被展示的时候调用的展示函数
*/
"mRender" : function(value,method,row){
return '<input type="checkbox" class="checkboxes" value='+value+' />';
}
}
],
/*
*默认为[ 'asc', 'desc' ]
* 你可以通过该参数控制默认排序的方向，甚至改变排序处理器的行为（例如：只允许升序排序）
*/
aaSorting : [1,'desc'],
/*
* fnServerData
* 无默认值
* 你可以使用该参数重写从服务器获取数据的方法（$.getJSON）,从而使其更适合你的应用
* 例如你可以使用POST方式提交，或者从Google Gears或者AIR数据库获取数据
*/
fnServerData : function(sSource, aoData, fnCallback) {
//获取查询条件并与aoData合并
var query=[];
$(".scr_result .sr_one").each(function(){
var name=$(this).attr("name");
var value=$(this).attr("value");
query = $.merge([{'fieldName': name,'fieldValue' : value}],query);
});
aoData=$.merge([{'name': 'query','value' : JSON.stringify(query)}],aoData);
$.ajax({
url : sSource,//这个就是请求地址对应sAjaxSource
data : aoData,//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
type : 'post',
dataType : 'json',
async : false,
success :function(result){
//成功返回结果后的处理
}
});
}
}
以上配置即可显示成带分页的表格哦。
