datatables使用封装
公司系统更新，使用了新的框架metronic bootstrap来搭建新的系统，而列表的展示用的就是datatbles插件，样式使用bootstrap。在对datatbles进行了多方研究后，我自己封装了数据表展示的的js，这样使用中只需要调用此方法，传入相应的参数即可快速搭建数据表展示界面。
基础的数据表展示方法如下：
/*
* 初始化表格，可多选
* tableName：表的id，不用#，默认为sample_1
* url：数据源地址
*/
function initTable(tableName, url) {
tableName = tableName || "sample_1";
url = url || getUrl("1");
var table = $("#" + tableName);
var oTable = table.dataTable({
// Or you can use remote translation file
"language": {
url: '../Content/Resource/jquery.dataTable.cn.txt'
},
buttons: [
],
"aLengthMenu": [
[20, 25, 30, 40, 50, 100, -1],
[20, 25, 30, 40, 50, 100, "全部"] // change per page values here
],
"autoWidth": false,
"sServerMethod": "POST",
"bProcessing": true,
"bStateSave": true, // save datatable state(pagination, sort, etc) in cooie.
"bServerSide": true,
"sAjaxSource": url,
"bSort": false,// 排序
"iDisplayLength": 30,
"sPaginationType": "bootstrap_full_number",
"fnServerParams": function (aoData) {//向服务器传额外的参数
aoData.push(
{ "name": "sNode", "value": exdData }
);
}
});
//选择第一行（表头行）最上面checkbox，所以行都选中
table.on('change', '.group-checkable', function () {
var set = jQuery(this).attr("data-set");
var checked = jQuery(this).is(":checked");
jQuery(set).each(function () {
if (checked) {
$(this).prop("checked", true);
$(this).parents('tr').addClass("active");
} else {
$(this).prop("checked", false);
$(this).parents('tr').removeClass("active");
}
});
});
//选择每行的开始checkbox，则选中此行，颜色变化
//此事件会先调用tr的click时间，这样会再次改变checkbox的状态，进而调用其chang事件
table.on('change', 'tbody tr .checkboxes', function () { //tbody tr
$(this).parents('tr').toggleClass("active");
});
//选中每行任意位置，改变行颜色，checkbox状态
table.on('click', 'tbody tr', function () {
$(this).toggleClass("active");
if ($(this).is(".active")) {
$(this).find(".checkboxes").prop("checked", true); //.attr("checked", true);
} else {
$(this).find(".checkboxes").removeAttr("checked"); //.attr("checked", false);
}
//当所有的行都被选中，则最上面的checkbox也勾选，否则不勾选
var showCount = table.find("tbody tr").length;
var selectedCount = $("input[class='checkboxes']:checked").length;
if (showCount == selectedCount) {
$('.group-checkable').prop("checked", true); //.attr("checked", true);比用attr好
} else {
$('.group-checkable').removeAttr("checked"); //.attr("checked", false);
}
});
//修改数据显示条数下拉控件样式处理
var tableWrapper = jQuery('#' + tableName + '_wrapper');
tableWrapper.find('.dataTables_length select').addClass("form-control input-xsmall input-inline"); // modify table per page dropdown
}其中本地方的txt文件单独存放的，内容如下：
{
"processing": "加载中...",
"lengthMenu": "每页显示 _MENU_ 条数据",
"zeroRecords": "没有匹配结果",
"info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"infoEmpty": "显示第 0 至 0 项结果，共 0 项",
"infoFiltered": "(由 _MAX_ 项结果过滤)",
"infoPostFix": "",
"search": "搜索:",
"url": "",
"emptyTable": "没有匹配结果",
"loadingRecords": "数据载入中...",
"thousands": ",",
"paginate": {
"first": "首页",
"previous": "上一页",
"next": "下一页",
"last": "末页"
},
"aria": {
"sortAscending": ": 以升序排列此列",
"sortDescending": ": 以降序排列此列"
}
}