有关datatables的非常规教程
有关datatables的非常规教程
1、
//$.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
table.columns.adjust()
2、{ "data": "name",'sClass': "text-center" },
sClass为控制居中的。
3、
table = $('#example').DataTable({
"aLengthMenu": [10,20,50,100, 200, 500], //更改显示记录数选项
"iDisplayLength": 100, //默认显示的记录数
//"dom": 't<"d"r><"row"<"col-md-2"l><"col-md-2"i><"col-md-8"p>>',
//"processing": true,
//"serverSide": true,
//"scrollY": tableScrollHeight,
dom: 't<"d"r><"row"<"col-md-4"i><"col-md-8"p>>',
"processing": true,
"serverSide": true,
"sScrollY": 260,
"bSort": false,
"bPaginate": false, //是否显示(应用)分页器
"ajax": {
"url": "/event/GetData",
datatype: "JSON",
dataSrc: function (data) {
$.extend(data, {
iTotalDisplayRecords: data.total,
iTotalRecords: data.total,
});
return data.maliang;
}
},
"columns": [
{
data: "Idx",
render: function (data, type, row, meta) {
var content = '<label style="margin:0">';
content += ' <input type="checkbox" data-type="selectRow" value="' + data + '" />';
content += ' <span></span>';
content += '</label>';
return content;
},
width: "50"
},
{ "data": null },
{ "data": "Idx" },
{ "data": "address" },
{ "data": "name",'sClass': "text-center" },
{ "data": "Salary" },
{
"class": "details-control",
"orderable": false,
"data": null,
"defaultContent": '<button type="button" edit class="btn btn-primary btn-xs" aria-label="Left Align"><span class="glyphicon glyphicon-edit" aria-hidden="true">编辑</span></button> ' +
'<button delete type="button" class="btn btn-danger btn-xs" aria-label="Left Align"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true">删除</span></button>'
},
],
columnDefs: [{
'targets': [0, 4],
'orderable': false
},
{
targets: 7,
render: function (data, type, row, meta) {
return '<div class="btn-group" btn-group>' +
'<ul class="dropdown-menu row_actions dropdown-menu-right clearfix">' +
'<li><a jssq href="#" data-toggle="modal" data-target="#roleModal">角色授权</a></li>' +
'<li><a ysq href="#" data-toggle="modal" data-target="#cloudModal">云授权</a></li>' +
'<li><a jssq href="#" data-toggle="modal" data-target="#roleModal">角色授权</a></li>' +
'<li><a ysq href="#" data-toggle="modal" data-target="#cloudModal">云授权</a></li>' +
'<li><a jssq href="#" data-toggle="modal" data-target="#roleModal">角色授权</a></li>' +
'<li><a ysq href="#" data-toggle="modal" data-target="#cloudModal">云授权</a></li>' +
'<li><a jssq href="#" data-toggle="modal" data-target="#roleModal">角色授权</a></li>' +
'<li><a ysq href="#" data-toggle="modal" data-target="#cloudModal">云授权</a></li>' +
'<li><a jssq href="#" data-toggle="modal" data-target="#roleModal">角色授权</a></li>' +
'<li><a ysq href="#" data-toggle="modal" data-target="#cloudModal">云授权</a></li>' +
'<li><a sc href="#">删除</a></li>' +
'</ul>' +
"<img width='18' height='18' data-direct='more' ddddddd='" + JSON.stringify(row) +"'"+' src= "/Content/images/更多.svg"/><img width="18" height="18" src= "/Content/images/修改.svg" /><img width="18" height="18" src="/Content/images/用户.svg" /></div>';
}
}],
"order": [[3, "desc"]],
"createdRow": function (row, data, index) {
if (data.Idx == 11) {
$(row).find("td:eq(3)").addClass("highlight")
}
if (data.Idx == 6) {
$(row).find("td").addClass("highlight")
}
if (data.appEditServerCheck) {
$(row).find('input[data-type="selectRow"]').prop('checked', true)
$(row).addClass("selected")
}
},
language: {
"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": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
},
"fnDrawCallback": function () {
var api = this.api();
var startIndex = api.context[0]._iDisplayStart;//获取到本页开始的条数
api.column(1).nodes().each(function (cell, i) {
cell.innerHTML = startIndex + i + 1
});
$('.dropdown-toggle').dropdown()
}
});
4、还有一个特别重要的每页显示多少条
最新文章
- 读取DBF文件数据
- ios见习之-UISearchbar+tableview实现自动搜索自带提示
- Xperf Basics: Recording a Trace (the easy way)(转)
- 242. Valid Anagram(C++)
- 《转》在win7,boa-constructor 0.6.1 的palette面板中没有控件图标的解决方法
- SpringMVC中Controller
- PHP header( ) 禁止页面后退
- git笔记--git@OSC
- WebService技术简介
- Python强大的格式化format
- ghithub中PHPOffice/PHPWord的学习
- 虹软SDK在nodejs中的集成
- MySQL全文本搜索
- Sentry有什么作用
- 【three.js练习程序】创建简单物理地形
- debug kibana in chrome
- 如何把PDF文件转换为JPG图片
- Nginx 默认配置解析
- 【计算几何】【斜率】bzoj1610 [Usaco2008 Feb]Line连线游戏
- silverlight 对ChildWindow返回给父窗体值的理解(转载)
热门文章
- 【编程技巧】ExtJs 设置GridPanel表格文本垂直居中
- MySQL改写子查询成Join
- 运行android程序的时分出现了No compatible targets were found.Do you wish to.
- Python 使用Pillow模块生成验证码
- React Native学习(八)—— 对接七鱼客服
- 使用SQL 提示优化sql
- Spring+JTA+Atomikos+mybatis分布式事务管理
- -bash: warning: setlocale: LC_CTYPE: cannot change locale (EN_US.UTF-8): No such file or directory
- 配置SESSION超时与请求超时
- asp.net core 部署到服务器之后外网访问不了