tableDatas插件表格完整示例
不废话直接上代码
html
css 和 js 官网都有的（实在找不到可留言哦！）
dome.json
//模拟数据
{
"code": 0,
"data": [
{
"name": "Mrli0",
"gender": "男",
"tel": "13555555551",
"age": "30",
"address": "中国"
},
{
"name": "Mrli1",
"gender": "女",
"tel": "13555555552",
"age": "21",
"address": "河南"
},
{
"name": "Mrli2",
"gender": "女",
"tel": "13555555553",
"age": "34",
"address": "北京"
},
{
"name": "Mrli3",
"gender": "男",
"tel": "13555555554",
"age": "29",
"address": "上海"
},
{
"name": "Mrli4",
"gender": "男",
"tel": "13555555555",
"age": "28",
"address": "四川"
}
],
"msg":"ok"
}
var datas; //tableDatas 渲染数据的集合
//获取展示数据信息
function patrolChart(userName, phone, queryTime, province, onlineType) {
$.ajax({
url: 'dome.json',
type: "GET",
async: false,
contentType: "application/json;utf-8",
data: {
//"token": haoutil.storage.get("token"),
//"userName": userName,
//"phone": phone,
//"queryTime": queryTime,
//"province": province,
//"onlineType": onlineType
},
success: function (result) {
if (result.code == 0) {
//datas = result.data;
datas = JSON.parse(result.data)//使用dome.json数据
return;
}
},
error: function (result) {
toastr.error("请求出错(" + result.code + ")：" + "");
}
});
}
function tableDatas(userName, phone, queryTime, province, onlineType) {
var githubTable;
//获取表格数据
patrolChart(userName, phone, queryTime, province, onlineType);
//获取表格数据
//issue表格初始化
githubTable = $("#teaListTable").DataTable({//导出表格信息
dom: 'Bfrtip',
buttons: [{
text: '导出',
extend: 'excelHtml5',
customize: function (xlsx) {
var sheet = xlsx.xl.worksheets['indexNew.xml'];
// Loop over the cells in column `C`
$('row c[r^="C"]', sheet).each(function () {
// Get the value
if ($('is t', this).text() == 'New York') {
$(this).attr('s', '20');
}
});
}
}],
data: datas,//data是tableDatas中的渲染数据的集合，如果用下方ajax此处需删除
"lengthMenu": [8],
"bFilter": true,//去掉搜索框
"oLanguage": {
"sProcessing": "正在加载中......",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "正在加载中...",
"sEmptyTable": "表中无数据存在！",
"sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"sInfoEmpty": "显示0到0条记录",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
},
//调用github api 获取issues 数据
//ajax: {//此处被我单独抽出来为patrolChart函数
// //url: haoutil.storage.get("baseUrl") +'hxservice/stat/statList'//数据接口
// url: 'js/demo.json'//数据接口
// ,data:{ token: haoutil.storage.get("token")}//参数
// ,dataSrc: ""
//},
//默认最后一列（最后更新时间）降序排列
order: [[5, "desc"]],
//行被创建回调
createdRow: function (row, data, dataIndex) {
},
//行创建完成后回调
rowCallback: function (row, data, index) {
var tags = $(row).find("td:eq(1)");
if (tags.text().indexOf("置顶") > 0) {
var title = $(row).find("td:eq(0)");
var hot = "";
title.html(title.html() + hot);
}
},
columnDefs: [
{
targets: 0,
width: "10%",
data: null,
title: "序号",
render: function (data, type, row, meta) {
return " " + (meta.row + 1) + " ";
}
},
{
targets: 1,
width: "15%",
data: "name",
title: "姓名",
render: function (data, type, row, meta) {
return "" + row.name + "";
}
},
{
targets: 2,
width: "20%",
data: "gender",
title: "性别",
render: function (data, type, row, meta) {
var comments = data + "";
return comments;
}
},
{
targets: 3,
width: "20%",
data: "tel",
title: "电话",
render: function (data, type, row, meta) {
return "" + data + "";
}
},
{
targets: 4,
width: "15%",
data: "age",
title: "年龄",
render: function (data, type, row, meta) {
return "" + data + "";
}
},
{
targets: 5,
width: "20%",
data: "address",
title: "地址",
render: function (data, type, row, meta) {
var title = "" + data + "";
return title;
}
}
],
initComplete: function () {
//表格加载完毕，手动添加按钮到表格上
$("#toolbar").css("width", "100px").css("display", "inline").css("margin-left", "10px");
$("#toolbar").append("导出");
}
});
(function ($) {
$.fn.clickToggle = function (func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function () {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
}(jQuery));
//表格 end
}