bootstrap datatable

 1 $(document).ready(function () {
 2         $('#example').dataTable({
 3             "sScrollX": "100%",   //表格的宽度
 4             "sScrollXInner": "110%",   //表格的内容宽度
 5             "bScrollCollapse": true,  //当显示的数据不足以支撑表格的默认的高度时，依然显示纵向的滚动条。(默认是false) 
 6             "bPaginate": true,  //是否显示分页
 7             "bLengthChange": true,  //每页显示的记录数
 8             "bFilter": true, //搜索栏
 9             "bSort": true, //是否支持排序功能
10             "bInfo": true, //显示表格信息
11             "bAutoWidth": false,  //自适应宽度
12             "aaSorting": [[1, "asc"]],  //给列表排序 ，第一个参数表示数组 (由0开始)。1 表示Browser列。第二个参数为 desc或是asc
13             "aoColumns": [
14                 null,
15                 null,
16                 {
17                     "bVisible": true, //不可见
18                     "bSearchable": false, //参与搜索
19                 },
20                 null,
21                 null
22             ], //列设置，表有几列，数组就有几项
23             "bStateSave": true, //保存状态到cookie *************** 很重要 ， 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了
24             "sPaginationType": "full_numbers", //分页，一共两种样式，full_numbers和two_button(默认)
25             "oLanguage": {
26                 "sLengthMenu": "每页显示 _MENU_ 条记录",
27                 "sZeroRecords": "对不起，查询不到任何相关数据",
28                 "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
29                 "sInfoEmtpy": "找不到相关数据",
30                 "sInfoFiltered": "数据表中共为 _MAX_ 条记录)",
31                 "sProcessing": "正在加载中...",
32                 "sSearch": "搜索",
33                 "sUrl": "", //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt
34                 "oPaginate": {
35                     "sFirst": "第一页",
36                     "sPrevious": " 上一页 ",
37                     "sNext": " 下一页 ",
38                     "sLast": " 最后一页 "
39                 }
40             }, //多语言配置
41             "bJQueryUI": false, //可以添加 jqury的ui theme  需要添加css
42             "aLengthMenu": [[10, 25, 50, -1, 0], ["每页10条", "每页25条", "每页50条", "显示所有数据", "不显示数据"]]  //设置每页显示记录的下拉菜单
43         });
44     });
45     /**直接调用默认的设置*/
46     $('#example').dataTable();
posted on 2016-04-11 21:36 激战阅读(635) 评论(0) 编辑收藏举报