有关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、还有一个特别重要的每页显示多少条

有关datatables的非常规教程的更多相关文章

  1. 使用Vue.js制作仿Metronic高级表格(一)静态设计

    Metronic高级表格是Metonic框架中自行实现的表格,其底层是Datatables.本教程将主要使用Vue实现交互部分,使用Bootstrap做样式库.jQuery做部分用户交互(弹窗). 使 ...

  2. DataTables学习:从最基本的入门静态页面,使用ajax调用Json本地数据源实现前端开发深入学习,根据后台数据接口替换掉本地的json本地数据,以及报错的处理地方,8个例子(显示行附加信息,回调使用api,动态显示和隐藏列...),详细教程

    一.DataTables  个人觉得学习一门新的插件或者技术时候,官方文档是最根本的,入门最快的地方,但是有时候看完官方文档,一步步的动手写例子,总会出现各种莫名其妙的错误,需要我们很好的进行研究出错 ...

  3. github上最全的资源教程-前端涉及的所有知识体系

    前面分享了前端入门资源汇总,今天分享下前端所有的知识体系. 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要成为 ...

  4. web前端开发教程系列-2 - 前端开发书籍分享(转)

    目录: 前言 一. CSS 二. JavaScript 三. jQuery 四. 后记   前言 前端书籍在每个商城或书架上面都是琳琅满目,很多初学者又不能很好的判断书的质量或层次.因为今天给同学们分 ...

  5. web前端开发教程系列-2 - 前端开发书籍分享

    目录: 前言 一. CSS 二. JavaScript 三. jQuery 四. 后记   前言 前端书籍在每个商城或书架上面都是琳琅满目,很多初学者又不能很好的判断书的质量或层次.因为今天给同学们分 ...

  6. [ES4封装教程]3.使用 Easy Sysprep v4 封装 Windows 7

    (一)安装与备份系统 1.安装 Windows 7 可能很多人会说,安装Win7谁不会,这也用说?装Win7的确人人都会,但如何安装才是最适合系统封装的,就未必是人人都会了.安装是封装之本,没有好的安 ...

  7. thinkphp+datatables+ajax 大量数据服务器端查询

    今天一白天全耗在这个问题上了,知乎2小时除外... 现在19:28分,记下来以备后查. 问题描述:从后台数据库查询人员信息,1w多条,使用一个好看的基于bootstrap的模板 Bootstrap-A ...

  8. 10个带源码的充满活力的Web设计教程

    10个带源码的充满活力的Web设计教程 2013-08-02 16:47 佚名 OSCHINA编译 我要评论(0) 字号:T | T Web设计师必须了解各种各样的Web设计风格,这才能让他或者她在设 ...

  9. datatables 学习笔记1 基础篇

    本文共3部分:基本使用|遇到的问题|属性表 1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ...

随机推荐

  1. Python实现简易Web服务器

     1.请自行了解HTTP协议 http://www.cnblogs.com/reboot51/p/8358129.html(点击跳转) 2.创建Socket服务,监听指定IP和端口 3.以阻塞方式等待 ...

  2. 一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](七)

    前言 大家好,我依旧是你们的老朋友Rector,很高兴又在周五的时候准时和大家见面. Rector的系列文章[一步一步创建ASP.NET MVC5程序[Repository+Autofac+Autom ...

  3. 使用VSCode 编译调试QT程序

    预备知识 bat文件,或者其他的脚本语法. qmake基本语法,qmake shadow build是啥. vscode 的task,lanch的配置. 前提 各个程序正确安装,即使用QtCreato ...

  4. sql 时间转换问题 from_unixtime() UNIX_TIMESTAMP()

    http://blog.csdn.net/test_soy/article/details/50328367 from_unixtime()是MySQL里的时间函数 date为需要处理的参数(该参数是 ...

  5. [转]同一台Windows机器中启动多个Memcached服务

    Memcached的安装后,如果手头上只有一台机器,又想做多节点测试咋办? 这就需要在一台机器上启动多个Memcached服务了. 假设Memcached在如下目录:C:\memcached\memc ...

  6. bootstrap-table 表格加载中....处理

    $('#table').bootstrapTable({data:[]}); $('#table').bootstrapTable("showLoading"); ajax数据加载 ...

  7. Linux磁盘热插拔命令

    对于支持热插拔SCSI技术的服务器,SCSI硬盘和磁带机可以在Linux下实现在线添加和移除,有两种方法实现,先说麻烦的 具体方法如下: 一. 添加或者删除硬盘/磁带机: # echo "s ...

  8. 优秀的基于VUE移动端UI框架合集

    1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档 在线预览 2.vux 基于WeUI和Vu ...

  9. 【转】Vim使用笔记

    http://www.cnblogs.com/jiqingwu/archive/2012/06/14/vim_notes.html 曾经使用了两年多的Vim,手册也翻过一遍.虽然现在不怎么用vim了, ...

  10. 使用jquery中height()方法获取各种高度

    $(window).height(); //浏览器当前窗口可视区域高度 $(document).height(); //浏览器当前窗口文档的高度 $(document.body).height();/ ...