table部分代码
<table class="table table-bordered table-striped" id="table-main">
<thead>
<tr>
<th>用户名</th>
<th>渠道名</th>
<th>游戏名</th>
<th>结果</th>
<th>耗时</th>
<th>创建时间</th>
</tr>
</thead>
</table>
异步加载数据并实现定制化
下面是简单例子, 其中 table-main 的初始化元素为table的id。
$('#select-game').select2(); // 初始化搜索下拉框 // 表格汉化列表
var table_lang = {
"sProcessing": "处理中...",
"sLengthMenu": "每页 _MENU_ 项",
"sZeroRecords": "没有匹配结果",
"sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
"sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页",
"sJump": "跳转"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
};
//初始化表格
var table_main = $("#table-main").dataTable({
language:table_lang, // 提示信息
autoWidth: false, // 禁用自动调整列宽
lengthMenu: [25, 50, 100],
stripeClasses: ["odd", "even"], // 为奇偶行加上样式，兼容不支持CSS伪类的场合
processing: false, // 隐藏加载提示,自行处理
serverSide: true, // 启用服务器端分页
searching: true, // 启用原生搜索
orderMulti: true, // 启用多列排序
order: [], // 取消默认排序查询,否则复选框一列会出现小箭头
renderer: "bootstrap", // 渲染样式：Bootstrap和jquery-ui
pagingType: "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
columnDefs: [{
"targets": 'nosort', // 列的样式名
"orderable": false // 包含上样式名‘nosort'的禁止排序
}],
ajax: function (data, callback, settings) {
//封装请求参数
var param = {};
param.limit = data.length; // 页面显示记录条数，在页面显示每页显示多少项的时候
param.start = data.start; // 开始的记录序号
param.page = (data.start / data.length)+1; // 当前页码
//ajax请求数据
$.ajax({
type: "GET",
