jquery dataTable
1.后台分页（含ajax请求）
效果：
需要引入的文件：
<table id="hometable_calllog" cellspacing="0" aria-describedby="example_info" class="table-striped table-bordered table-hover display nowrap dataTable dtr-inline collapsed" style="text-align: center; margin: auto; width: 100%;"> <thead style="font-weight:bold"></thead> <tbody></tbody> </table>
<link href="~/Content/trtc/js/media/css/bootstrap.min.css" rel="stylesheet" /> <link href="~/Content/trtc/js/media/css/dataTables.bootstrap.css" rel="stylesheet" /> <script src="~/Content/trtc/js/jquery-3.2.1.min.js"></script> <script src="~/Content/trtc/js/media/js/jquery.js"></script>
<script src="~/Content/trtc/js/media/js/jquery.dataTables.js"></script> <script src="~/Content/trtc/js/media/js/dataTables.bootstrap.js"></script>
$('#hometable_calllog').DataTable({
language: {
url: "/Content/trtc/js/media/zh_CN.json"
},
order: [[1, "desc"]],
bSort: false, //是否启动各个字段的排序功能
info: true,
paging: true,
processing: true,
searching: false,
bPaginate: true,//分页总开关
bLengthChange: false, //开关，是否显示每页显示多少条数据的下拉框
iDisplayLength: 5, //每页初始显示5条记录
// pageLength: 1,//每页显示10条数据
pagingType: "full_numbers",//分页样式
// dom: '<t><lfip>',
bAutoWidth: true,
responsive: true,
destroy: true,
serverSide: true,
columns: [
// { data: 'id', title: '用户ID' },
{
data: 'requestTime', title: '时间', render: (data) => {
return data.replace('T', ' ')
}
},
{ data: 'appMemberName', title: '呼叫号码' },
{
data: 'requestType', title: '通讯方式', render: (data) => {
return data === 2 ? '<i class="iconfont icon-ball-camera"></i>' : '<i class="iconfont icon-Call"></i>'
//'视频通话' : '音频通话'
},
},
{
data: 'null', title: '操作', render: (data, type, row, meta) => {
return '处理'
}
}
],
fnCreatedRow: function (nRow, aData, iDataIndex) {
if (aData.answerMode !== 4) {
$(nRow).css("color", 'red')
} else {
$(nRow).css("color", 'green')
}
},
ajax: function (data, callback, settings) {
var pageSize = 0, start, pageIndex = 1
if (data.length) {
pageSize = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候,页大小
start = data.start;//开始的记录序号
pageIndex = (data.start) / data.length + 1;//当前页码
}
//封装相应的请求参数，这里获取页大小和当前页码
var param = {
// serviceCallNum: _userId,
/// answerMode: 3,
// pageSize: pageSize,//这里只传了当前页和页大小，如果有其他参数，可继续封装
// pageIndex: pageIndex
serviceCallNum: _userId,//客服帐号
appMemberName: '',//手机号
biginTime: null,//开始时间
engTime: null,//结束时间
requestType: '',//通讯方式
answerMode: 3, //0-全部 1-无在线坐席人员，2-坐席人员繁忙，3-坐席人员未接听，4-正常通讯,5客户拒绝
memberName: '',//根据坐席人员名字查询
pageSize: pageSize,//这里只传了当前页和页大小，如果有其他参数，可继续封装
pageIndex: pageIndex
}
$.ajax({
url: "/Video/GetServiceCallRecords",
dataType: "json",
async: false,
data: param ,
success: function (data) {
if (data.code === 0 && data.data) {
var returnData = {};
//returnData.draw = arr.data.pagination.pageCount;//这里直接自行返回了draw计数器,应该由后台返回，没什么卵用！
returnData.recordsTotal = data.data.totalCount;//totalCount指的是总记录数
returnData.recordsFiltered = data.data.totalCount;//后台不实现过滤功能,全部的记录数都需输出到前端，记录数为总数
returnData.data = data.data.records ? data.data.records : '';//返回列表
callback(returnData);
}
},
});
}
});
2.客户端分页（含ajax请求）
var table = $('#table_calllog').DataTable({ "language": { url: "/Content/trtc/js/media/zh_CN.json" }, "order": [[1, "desc"]], "bSort": true, //是否启动各个字段的排序功能 "info": true, "paging": true, "processing": true, "searching": true, "bPaginate": true,//分页总开关 "bLengthChange": false, //开关，是否显示每页显示多少条数据的下拉框 "aLengthMenu": [5, 10, 20, 50],//设置每页显示数据条数的下拉选项 'iDisplayLength': 10, //每页初始显示5条记录 "pagingType": "full_numbers",//分页样式 // dom: '<t><lfip>', "responsive": true, "destroy": true, columns: [ // { data: 'id', title: '用户ID' }, { data: 'appMemberName', title: '号码' }, { data: 'requestTime', title: '时间', render: (data) => { return data.replace('T', ' ') } }, { data: 'null', title: '类型', render: (data) => { return '呼入' } }, { data: 'callTotalDurations', title: '通话时长', render: (data) => { const h = parseInt(data / 3600) const minute = parseInt(data / 60 % 60) const second = Math.ceil(data % 60) const hours = h < 10 ? '0' + h : h const formatSecond = second > 59 ? 59 : second return `${hours > 0 ? `${hours}:` : '00'}:${minute < 10 ? '0' + minute : minute}:${formatSecond < 10 ? '0' + formatSecond : formatSecond}` } }, { data: 'requestType', title: '通讯方式', render: (data) => { return data === 2 ? '视频通话' : '音频通话' }, }, { data: 'answerMode', title: '呼叫状态', render: (data) => { return data === 4 ? '接听' : '未接听' //3 } }, { data: 'null', title: '操作', render: (data, type, row, meta) => { return '回拨' } } ], fnCreatedRow: function (nRow, aData, iDataIndex) { if (aData.answerMode !== 4) { $(nRow).css("color", 'red') } else { $(nRow).css("color", 'green') } }, serverSide: false, ajax: { url: "/Video/GetUserAppCallNumRecords", type: "GET", dataType: 'json', data: { DateBegin:new Date().Format("yyyy-MM-dd"), DateEnd: new Date().Format("yyyy-MM-dd") +" 23:59:59", serviceCallNum: $('#userId')[0].value, CallSatus: 3, }, dataSrc: function (data) { $(data).each((index, item) => { let HomePopup = new Base({ userId: item.appMemberName, index: index }); HomePopup.missCallNotify() }) return data }, } });
说明：serverSide: false,则为客户端分页
3.初步认识dataTable（无ajax请求）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>datatable例子</title> <!--第一步：引入Javascript / CSS （CDN）--> <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="./libs/media/css/dataTables.bootstrap.css"> <script src="./libs/media/js/jquery.js"></script> <script src="./libs/media/js/jquery.dataTables.js"></script> <script src="./libs/media/js/dataTables.bootstrap.js"></script> </head> <body> <!--第二步：初始化表格样式--> <table id="table_calllog" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%"> <thead align="center"> </thead> <tbody> </tbody> </table> <script> // <!--第三步：初始化Datatables--> $(document).ready(function () { var d = []; for (let i = 0; i < 10; i++) { d.push('{"param1": "user_1","param2": "2021/12/06 12:15:30","param3": "2021/12/06 12:15:30","param4": "14分钟","param5": "语音通话","param6": "回拨"}') } d = eval("([" + d + "])"); //注意不是所有浏览器都支持JSON对象，最好eval var html = []; for (var i = 0; i < d.length; i++) { html.push('<tr class="misscall"><td>' + d[i].param1 + '</td><td>' + d[i].param2 + '</td><td>' + d[i].param3 + '</td><td>' + d[i].param4 + '</td><td>' + d[i].param5 + '</td><td>' + d[i].param6 + '</td></tr>'); } $('#table_calllog tbody').prepend(html.join('')); var table = $('#table_calllog').DataTable({ language: { url: "./libs/media/zh_CN.json" }, "info": true, "paging": true, "processing": true, "searching": true, bPaginate: true,//分页总开关 "bLengthChange": false, //开关，是否显示每页显示多少条数据的下拉框 "aLengthMenu": [5, 10, 20, 50],//设置每页显示数据条数的下拉选项 'iDisplayLength': 5, //每页初始显示5条记录 pagingType: "full_numbers",//分页样式 // dom: '<t><lfip>', columns: [ { data: 'param1', title: '用户' }, { data: 'param2', title: '开始时间' }, { data: 'param3', title: '结束时间' }, { data: 'param4', title: '通话时长' }, { data: 'param5', title: '通讯方式' }, { data: 'param6', title: '操作' } ], serverSide: false, }); }) </script> </table> </body> <style> #table_calllog { text-align: center; } #table_calllog th { text-align: center; vertical-align: middle; } .misscall { color: red } .row { margin-right: 0px; margin-left: 0px; } </style> </html>
浙公网安备 33010602011771号