Datatables基本初始化——jQuery表格插件



一、概念

1.Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能
datatables默认情况已启用一些功能,搜索、 排序、 分页等功能已经开启

2.怎样简单地使用DataTables?使用下方简单的几行代码,一个方法初始化table。 
   

$(document).ready(function(){
        $('#myTable').DataTable();
    });


3.开始使用DataTables很简单,只需要引入两个文件, 一个css样式文件和DataTables本身的脚本文件。
4.安装:在你的项目中使用 DataTables,只需要引入三个文件即可,jQuery库,一个DT的核心js文件和一个DT的css文件



	

	
	

	
	
	

Column 1 Column 2
Row 1 Data 1 Row 1 Data 2
Row 2 Data 1 Row 2 Data 2


注意:创建table表格的时候必须写和标签,否则datatable样式显示不出来



5.DataTables布局(dom定位)
datatables默认会打开部分特性,比如搜索框,分页显示等。如果不喜欢默认的布局,则使用DOM选项就可以灵活配置各个特性的设置

datatables定义了10个字符表示不同的组件
•l - Length changing 每页显示多少条数据选项
•f - Filtering input 搜索框
•t - The Table 表格
•i - Information 表格信息
•p - Pagination 分页按钮
•r - pRocessing 加载等待显示信息
•< and > - div elements 一个div元素
•<"#id" and > - div with an id 指定id的div元素
•<"class" and > - div with a class 指定样式名的div元素
•<"#id.class" and > - div with an id and class 指定id和样式的div元素

6.垂直滚动条

如果在一个固定高度的容器里放table,这个时候可能需要用到垂直滚动条,才能展示所有数据。
 开启垂直滚动条很简单,只要设置scrollY和scrollCollapse选项即可

jQuery-UI风格的垂直滚动条

加以下代码,可以滚动查看信息并且显示UI风格:
先引入jQueryUI的样式:

	
	
	


$(document).ready(function() {
     $('#example').dataTable( {
         "scrollY": 200,//scrollY=100显示三行数据,=200显示六行数据,此处可随意设置
         "scrollCollapse": true,
         "jQueryUI": true
     } );
 } );


一般设置滚动后就不用加pagination分页按钮了
7.水平滚动条

开启水平滚动条,设置scrollX选项
在这个例子中还加入css样式 th, td { white-space: nowrap; } ,使文字内容在一行里

"scrollX": true,//开启水平滚动条
结合style样式,更明显


8.不同的分页样式
默认情况下Datatables的分页就是上一页、下一页和6个页数按钮,这适合大部分情况。
Datatables提供了四个模式供选择,通过设置 pagingType选项来配置
•simple - 只有上一页、下一页两个按钮"pagingType":   "simple"
•simple_numbers - 除了上一页、下一页两个按钮还有页数按钮,Datatables默认是这个"pagingType":   "simple_numbers"
•full - 有四个按钮首页、上一页、下一页、末页"pagingType":   "full"
•full_numbers - 除首页、上一页、下一页、末页四个按钮还有页数按钮"pagingType":   "full_numbers"

下面例子full_number的例子

$(document).ready(function() {
  $('#example').dataTable( {
    "pagingType":   "full_numbers"
  } );
} );


9.保存状态
Datatables设置 stateSave选项后,可以保存最后一次分页信息、排序信息,当页面刷新,或者重新进入这个页面,恢复上次的状态。
 这个状态的保存用了html5的本地储存和session储存,这样更加有效率。如果你的数据是异步获取的,你可以使用 stateSaveCallback和 stateLoadCallback选项.
需要注意的是,这个特性不支持ie6、ie7
默认情况下,这个状态会保存2小时,如果你希望设置的时间更长,通过设置参数 stateDuration来初始化表格
 这个参数值也可以控制是本地储存(0~更大)还是session储存(-1)
下面的例子展示了Datatables设置 stateSave选项初始化后,实现的状态保存

$(document).ready(function() {
  $('#example').dataTable( {
    "stateSave":true//当页面刷新的时候,会恢复上次的状态
  } );
} );


10.开启/关闭datatables的某些功能
如果不想要datatables的某些功能,可以禁用它

$(document).ready(function() {
  $('#example').dataTable( {
    "paging":   false,//取消分页功能
    "ordering": false,//取消升序降序排列功能
    "info":     false//取消显示行数信息的功能Showing 1 to 10 of 57 entries
  } );
} );


11.复杂表头(rowspan和colspan)
制定复杂的表头(合并列/合并行)

在使用表格的时候总会遇到要分组列的情况,datatables完全支持合并列/合并行


12.一个页面初始化多个表格
datatables可以初始化多个表格,只需要使用jquery的选择器即可
这些表都是独立(即用户控制一个表上分页不会影响其他表格),但它们共享给定的初始化参数 (例如如果你指定的国际化文件,所有的表将显示你指定的语言)。
此外,API 可以一起操作或者独立操作。

某几个独立的表,将table的class设置为相同


然后写JS脚本

$(document).ready(function() {
  $('table.display').dataTable();
} );


13.多列排序

datatables允许同时指定多个列排序,有很多不同的方法来实现:
•用户按住shift,鼠标分别点击第一列,第二列等等,可以实现多列同时排序
•给每列加上columns.orderData选项,即如果指定列排序时,第一列有相同数据,则按照第二列排序
•使用columns.orderData选项给多列排序,比如[ [0,'asc'], [1,'asc'] ]
•使用order()方法实现多列排序

注意,可以使用orderMulti 选项来禁用用户按住shift点击多列排序

$(document).ready(function() {
  $('#example').dataTable( {
 
    columnDefs: [ {
      targets: [ 0 ],
      orderData: [ 0, 1 ]  //如果第一列进行排序,有相同数据则按照第二列顺序排列
    }, {
      targets: [ 1 ],
      orderData: [ 1, 0 ]  //如果第二列进行排序,有相同数据则按照第一列顺序排列
    }, {
      targets: [ 4 ],
      orderData: [ 4, 0 ]  //如果第五列进行排序,有相同数据则按照第一列顺序排列
    } ]
  } );
} );


14.表格宽度自适应
让表格跟着页面大小的变化而变化,表格随着页面的大小变化自动适应

用法:

属性中,必须设置width=100%,

然后JS代码:

$(document).ready(function() {
  $('#example').dataTable();
} );


15.数字格式化(国际化)==========================================================================好像是不管用,没什么效果
通过language.decimal选项可以配置数字的友好显示,比如1200450,显示为12.004,50

$(document).ready(function() {
  $('#example').dataTable( {
     "language": {
        "decimal":",",
        "thousands":"."
    }
  } );
} );


16.语言国际化
可以使用language选项来国际化Datatables的相关信息

$(document).ready(function() {
         $('#example').dataTable( {
             "language": {
                 "lengthMenu": "每页 _MENU_ 条记录",
                 "zeroRecords": "没有找到记录",
                 "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                 "infoEmpty": "无记录",
                 "infoFiltered": "(从 _MAX_ 条记录过滤)"
             }
         } );
 } );



17.设置隐藏列
不希望显示在屏幕上,或者需要什么条件才会显示,使用columns.visible选项来实现
被隐藏的列依然是表格的一部分,通过column().visible()方法来显示
被隐藏的列既然是表格的一部分,那么也可以搜索和访问被隐藏的列的相关内容

$(document).ready(function() {
  $('#example').DataTable( {
    "columnDefs": [
      {
        "targets": [ 2 ],//目标定位到第三列
        "visible": false,//设置不可见
        "searchable": false//不能被搜索到
      },
      {
        "targets": [ 3 ],//目标定位到第四列
        "visible": false//设置不可见
      }
    ]
  } );
} );


18.默认排序
在datatables初始化时可以使用order选项指定列怎么排序,order可以接受多个二维数组数据,
数组第一个位置为第几列,第二个位置为标示asc升序或desc降序

$(document).ready(function() {
              $('#example').dataTable( {
              //跟数组下标一样,第一列从0开始,这里表格初始化时,第四列默认降序
                "order": [[ 3, "desc" ]]
              } );
            } );



你可能感兴趣的:(JavaScript,Datatables,jquery,插件,搜索,分页)