Datatables快速入门开发--一款好用的JQuery表格插件

Posted 2020-08-13

　　博主是一个java后端程序员小白,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jquery表格插件,上手很快,重点是超级好用,有完善的中文文档,今天有空,整理一下Datatable的一些使用方法及注意事项,以便随时查阅.

DataTables支持的功能:

　　1.分页,只需要返回符合规范的数据类型,Datatable能帮我们实现好用的分页,同时支持排序,和即时搜索.

　　2.丰富的数据源的支持

　　3,支持国际化,支持多种主题.

快速使用

　　1.使用Datatables非常简单,只需要引入一个css样式文件和一个js脚本文件,即可,官网提供了文件的cdn地址可直接引用.

　　CSS: //cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css

　　JS:   //cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js

　　2.js中,使用一下简单的几行代码,就能初始化datatables风格的表格样式,并使用Datatable提供的丰富功能.

1 $(document).ready(function(){
2         $(‘#myTable‘).DataTable();
3     });

　　html页面中的table标签定义一个id,比如id="myTable".

丰富配置项

　　以上就可以实现基本风格的datatables样式,datatables默认情况下已启用一些功能,比如搜索,排序,分页,要想更加自由的控制样式,我们需要更详细的配置.

DOM定位

　　dom定位可以实现你自由的布局 分页,搜索框等等这些组件,以下是一些组件以及字符缩写.

•      l - Length changing 每页显示多少条数据选项
•     f - Filtering input 搜索框
•     t - The Table 表格
•     i - Information 表格信息
•     p - Pagination 分页按钮
•     r - pRocessing 加载等待显示信息

　　如果我们使用下面的代码来控制样式,表示 i显示在top(顶部),flp显示在bottom(底部).这样就可以自定义组件位置了.

$(‘#example‘).dataTable( {
        "dom": ‘<"top"i>rt<"bottom"flp><"clear">‘
    } );

国际化配置

　　datatables使用的语言选项可以通过language来配置,语言配置作为初始化配置的一部分,可以通过一下配置来自定义页面各个地方的显示文本.　　

$(‘#example‘).DataTable({
    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": ": 以降序排列此列"
        }
    }
});

 

 限制水平宽度/垂直高度

　　如果需要在一个定宽或者定高的table里展示数据,为了能够展示所有的数据,就要限制宽度,或高度,使用垂直或水平滚动条,在Datatable中使用如下配置:

$(document).ready(function() {
  $(‘#example‘).dataTable( {
    //开启水平滚动条
    "scrollX": true
    //设置固定高度为200px 数据量溢出时出现滚动条
    "scrollY": "200px",
    "scrollCollapse": "true",
     //不启用分页(展示所有)
     "paging": "false"
  } );
} );

 其他配置功能:

$(document).ready(function() {
  $(‘#example‘).dataTable( {
    //禁用分页
    "paging":   false,
    //禁用排序
    "ordering": false,
    //禁用本地搜索
    "searching":false,
    //开启选择每页显示多少记录的下拉框 如果pageing配置为false,此配置会自动置为false
     "lengthChange":true,
     //是否显示正在处理的状态。开启后在数据加载过程中,会有正在加载状态
     "processing": "true"
    //是否显示正在处理的状态。开启后在数据加载过程中,会有正在加载状态,在处理耗时数据时比较有用
     "processing": "true"
     //开启延迟渲染,假设加载1000条数到表格.每页显示10条,开启后datatables只会创建10个节点,即根据分页的生命周期来创建行
     "deferRender": true
      //禁用自动列宽的计算,如果以自定义列宽,建议禁用,因为此操作会耗费一些额外时间计算列宽
      "autoWidth": false,
      //禁用状态保存 开启后再次加载页面表格状态会被设成之前的状态
      "stateSave" : false,
  } );
} );

数据源

　　这里主要讲解ajax获取对象数据

$(document).ready(function() {
    $(‘#example‘).DataTable( {
//ajax可以接收string,object,fucntion 
        "ajax": {
                //type url 不需多说
                "type": "POST",
                "url":$(‘#game_detail_data‘).attr("data-url"),
                //从服务器获得json数据,使用dataSrc属性把data改为aodata
                "dataSrc": "aoData",
               //请求参数,添加额外的参数发送到服务器 接受一个fucntion
                "data":function(d){
                    d.pageType=‘DETAIL‘;
                    d.channelName=$("#channelname").val().trim();
                    d.tag=$("#tag").val();
                    d.startTime=$("#startTime").val();
                    d.endTime=$("#endTime").val();
                }
            },
       //返回数据是对象列表的时候需要使用如下方式与列名一一对应好
        "columns": [
            { "data": "name" },
            { "data": "age" },
            { "data": "sex",
       //渲染数据显示在表格中,render可以让你在table显示非常多样化的格式
　　　　　　　　"render" : function(data, type, full, meta) {
    　　　　　　　　　　if(data==‘boy‘){
      　　　　　　　　　　  data ="男";
  　　　　　　　　　　  }else{
      　　　　　　　　　　  data ="女";
   　　　　              }
                   return  data;
}},
 },
            { "data": "phone" },
            { "data": "address" },
            { "data": "salary" }
        ]
    } );
} );

回调函数

　　datatable支持在数据初始化的各个时机进行一些自定义操作,下面说两个比较常用的:

$(‘#example‘).dataTable( {
//数据初始化表格绘制成功后调用此函数
  "initComplete": function() {
    alert( ‘初始化以后调用‘ );
  }
//每次表格重绘的时候都调用这个函数
"drawCallback": function( settings ) {
        alert( ‘每次表格重绘时调用‘ );
    }
} );

 参考文档

　　Datatables官方文档