JQuery DataTables 基本配置(最新实例)
来源:互联网 发布:阿里云企业邮箱购买 编辑:程序博客网 时间:2024/05/18 22:45
参考官方文档
DataTables安装
第一步引入JS,CSS
第二步:配置基本HTML
第三步:配置DataTables 基本参数
<!--第一步:引入Javascript / CSS (CDN)--><!-- DataTables CSS --><link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css"><!-- jQuery --><script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script><!-- DataTables --><script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script><!--或者下载到本地,下面有下载地址--><!-- DataTables CSS --><link rel="stylesheet" type="text/css" href="DataTables-1.10.15/media/css/jquery.dataTables.css"><!-- jQuery --><script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.js"></script><!-- DataTables --><script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.dataTables.js"></script><!--第二步:添加如下 HTML 代码--><table id="table_id_example" class="display"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> </tr> </thead> <tbody> <tr> <td>Row 1 Data 1</td> <td>Row 1 Data 2</td> </tr> <tr> <td>Row 2 Data 1</td> <td>Row 2 Data 2</td> </tr> </tbody></table><!--第三步:初始化Datatables-->$(document).ready( function () { $('#table_id_example').DataTable();} );
DataTables 基本配置实例:
下面这些参数的配置,都是1.10.15 版本最新的配置参数,sPaginationType,iDisplayLength,bSort,bLengthChange,fnServerParams 这些参数在新版本中已经变了,虽然 DataTables向下兼容,但是不再推荐使用了。
//表格全局设置, 配置已更新为新版本//把公共的设置项都放在这里,就不需要每个页面都设置一遍了,放在jQuery对象上是为了避免污染全局变量 $.fn.dtconfig = { processing: true,//是否显示加载中提示 autoWidth: false,//是否自动计算表格各列宽度 info: true,//是否显示页数信息 pagingType:"full_numbers", pageLength :10,//默认每页显示多少条记录 searching: false,//是否显示搜索框 ordering:false,//是否允许排序 serverSide: true,//是否从服务器获取数据 stateSave: false,//页面重载后保持当前页 lengthChange: true,//是否显示每页大小的下拉框 lengthMenu: [ 10, 15,25, 50, 75, 100 ],//长度菜单 language: { lengthMenu: "每页显示 _MENU_记录", zeroRecords: "没有匹配的数据", info: "第_PAGE_页/共 _PAGES_页 ( 共\_TOTAL\_条记录 )", infoEmpty: "没有符合条件的记录", search: "查找", infoFiltered: "(从 _MAX_条记录中过滤)", paginate: { "first": "首页 ", "last": "末页", "next": "下一页", "previous": "上一页" } }, responsive: true, scrollX: true,//横向滑动 //deferRender: true,//控制表格的延迟渲染,可以提高初始化的速度 //dom: 'lBrtip',//DataTables 各模块显示位置 //buttons: [// DataTables Button 扩展,使用时,需要引入插件相关的JS // //{ // // extend: "copy", // // className: "btn-sm" // //}, // //{ // // extend: "csv", // // className: "btn-sm" // //}, // { // extend: "excel", // text: "导出本页(Excel)", // className: "btn-primary", // filename:"人员表" // }, // //{ // // extend: "pdfHtml5", // // className: "btn-sm" // //}, // //{ // // extend: "print", // // className: "btn-sm" // //}, //] }
公共部分放在通用的JS种, 我们每个页面,就可以直接这样使用了:
$('#table_id_example').DataTable($.fn.dtconfig);
效果
阅读全文
1 0
- JQuery DataTables 基本配置(最新实例)
- JQuery DataTables插件使用说明(最新)
- JQuery DataTables 服务端分页的实现(最新实例)
- JQuery DataTables 服务端自定义查询(最新版本介绍)
- Jquery datatables 配置记录
- jquery datatables的使用实例
- jquery datatables 的 配置参数
- Jquery dataTables api 配置笔记
- Jquery dataTables api 配置笔记
- jquery datatables 初始化配置归纳
- 【JQuery,前端】Jquery.Datatables 基本创建方法
- jQuery DataTables的服务器端一般配置+整合多列多参数多字段筛选,排序(实例)
- Jquery DataTables 基本设置的中文注解
- jquery表格插件datatables应用实例
- jquery表格插件datatables应用实例
- jquery datatables api (转)
- jquery datatables api (转)
- jquery datatables api (转)
- 图片二次采样
- 专访Dan Kohn:阡陌交迭,云原生布局开源生态构建及深度应用
- 乔纳森-艾维
- 2017java面试题
- TypeError: object() takes no parameters
- JQuery DataTables 基本配置(最新实例)
- dfs
- MySQL 导出数据
- Design库-TabLayout属性详解
- 设计师说,我们要在 App 里用十种字体!!!
- 将InputStream转换为byte数组
- 【环境部署】-jenkins下取包部署新版本
- protobuf windows编译和安装
- 学生信息系统的c程序