var language = {
"sProcessing": "加载中...",
"sLengthMenu": "每页显示 _MENU_ 条结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 条记录,共 _TOTAL_ 条记录",
"sInfoEmpty": "显示第 0 至 0 条记录,共 0 条记录",
// "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoFiltered": "",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
},
"select": {
"rows": {
"_": "选择 %d 行",
}
}
};
$(document).ready(function () {
var table = $('#example').DataTable({
language: language,
// 显示条数切换下拉 默认 true
lengthChange: true,
lengthMenu: [10 ,20, 50, 100],
//分页是否开启,默认 true
paging: true,
// Y轴滚动条
scrollY: 300,
// X轴滚动条
scrollX: '100%',
// 开启服务器模式 默认false
serverSide: true,
// 开启搜索框 默认true
searching: false,
// 开启排序 默认true
ordering: true,
// 默认排序的列
order: [[ 1, "desc" ]],
// 开启加载提示 默认false
processing: true,
// ajax请求地址
ajax: function (data, callback, setting) {
console.log('原始参数:',data);
//封装请求参数
var param = {};
param.draw = data.draw;
param.pageSize = data.length; //页面显示记录条数,在页面显示每页显示多少项的时候
param.start = data.start; //开始的记录序号
param.page = (data.start / data.length) + 1;
param.name = $('#name').val();
param.tel = $('#tel').val();
console.log('发送参数:',data);
$.ajax({
url: 'https://www.easy-mock.com/mock/5ce6627514d12512bdbf8891/userList',
type: 'GET',
//禁用缓存
cache: false,
data: param,
dataType: 'json',
success: function (res) {
// 对返回的数据进行处理
if (res.status === 1) {
let data = {
//必选,Datatables发送的draw是多少那么服务器就返回多少
draw: res.result.draw,
//必选,即没有过滤的记录数
recordsTotal: res.result.recordsTotal,
//必选,过滤后的记录数
recordsFiltered: res.result.recordsFiltered,
//必选,表中中需要显示的数据
data: res.result.data
};
callback(data);
} else if (res.status === 0) {
alert('接口返回异常');
} else {
alert('状态码错误');
}
},
error: function (error) {
throw error;
}
});
},
// 列数据
columns: [
{
name: '选择',
width: 100,
orderable : false
},
{
name: 'ID',
data: "id",
sClass: "text-center",
width: 100,
},
{
name: '创建日期',
data: "createDate",
sClass: "text-center",
width: 300,
},
{
name: '姓名',
data: "name",
sClass: "text-center",
width: 100,
},
{
name: '手机',
data: "mobile",
sClass: "text-center",
width: 250,
},
{
name: '状态',
data: "status",
sClass: "text-center",
width: 100,
orderable : false
},
{
name: '操作',
sClass: "text-center",
width: 200,
orderable : false
},
],
columnDefs: [
// 在第一列添加选择框
{
targets: 0,
className: 'select-checkbox',
render: function () {
return null
}
},
{
targets: 1,
render: function (data) {
return ++data
},
},
{
targets: -2,
render: function (data, type) {
return data ? '正常' : '禁用'
},
},
// 自定义最后一列的内容
{
targets: -1,
render: function (data, type) {
return '<span class="btn btn-primary btn-xs">查看</span>'
},
}
],
// checkbox选项
select: {
//多选模式
style: 'multi',
// 点击选择器
selector: 'tr',
// 禁用选择信息的显示
info: false,
},
// 固定列选项
fixedColumns: {
leftColumns: 1,
rightColumns: 2,
}
});
// 获取行数据
$('#example tbody').on('click', '.btn', function (event) {
event.stopPropagation();
var data = table.row($(this).parents('tr')).data();
console.log(data);
alert(JSON.stringify(data));
});
// 点击查询
$('#search').on('click', function (event) {
event.preventDefault();
// 按照参数重载table
table.ajax.reload();
// 返回第一页
// table.page(1).draw(true);
});
// 选择全部
$('#selectAll').on('click', function () {
table.rows().select();
});
// 取消全部
$('#deSelectAll').on('click', function () {
table.rows().deselect();
});
// 获取选择的信息
$('#getAll').on('click', function () {
var datas = table.rows('.selected').data(),
arr = [];
[].forEach.call(datas, function(item) {
arr.push(item);
});
console.log(arr);
alert(JSON.stringify(arr));
});
});
<div class="container">
<hr>
<form class="form-inline">
<div class="form-group">
<label for="name">姓名:</label>
<input type="text" class="form-control input-sm" id="name" name="name" placeholder="姓名">
</div>
<div class="form-group">
<label for="tel">电话:</label>
<input type="text" class="form-control input-sm" id="tel" name="tel" placeholder="电话">
</div>
<input class="btn btn-primary btn-sm" id="search" type="submit">
<input class="btn btn-primary btn-sm" type="reset">
</form>
<hr>
<table id="example" class="table table-striped table-bordered">
<thead>
<tr>
<th class="text-center">选择</th>
<th>ID</th>
<th>注册日期</th>
<th>姓名</th>
<th>手机号</th>
<th>用户状态</th>
<th>自定义操作</th>
</tr>
</thead>
</table>
<hr>
<div class="row">
<button id="selectAll" class="btn btn-primary btn-sm">选择全部</button>
<button id="deSelectAll" class="btn btn-primary btn-sm">取消全部</button>
<button id="getAll" class="btn btn-primary btn-sm">获取全部</button>
</div>
</div>
div.dataTables_wrapper div.dataTables_info{
padding: 10px 0;
}