表格插件之一datatables

Posted 2020-07-11

datatables的基础使用

引入css文件dataTables.bootstrap.css 

引入js插件dataTables  

引入js文件：jquery.dataTables.js，dataTables.bootstrap.js

Js调用：

 

  $(".dataTables-example").dataTable();

html部分：

展示效果如下，功能都能操作

 

但是一般我们不需要按条分页还有搜索，只需要分页，我们可以配置相关参数

例如 去掉排序：

 $(".dataTables-example").dataTable(
                {
                    "ordering": false,
                    "searching": false
                }
        );

去掉搜索

$(".dataTables-example").dataTable(
         {
         "ordering": false,
         "searching": false,
         "lengthChange": false
         }

这样上面图片就只有分页了。

 

 ajax 异步取数

　　参数是ajax，相信大家不陌生，用过jQuery的人对这个应该很熟悉。dt是基于jquery做的表格插件，所以dt在读取数据时也用了jquery的ajax，虽然是类似，但是有加强，下面看ajax的用法吧。 基本语法：

 js 调用：

  $("#example").DataTable({
            ajax:"dada.json",
            colunms:[
                {data,"name"},
                {data,"age"}
            ]
        });

json部分是：

{
	"data":[
    	{
        	"name"："datatable中文网","age"："2"
        },
        {
        	"name"："datatable中文网","age"："3"
        }
    
    ]
}

js 调用可以更简单：

$("#example").DataTable({
            ajax:"dada.json"
         });

json 使用数组格式

{
  "data":[
    	      ["name"："datatable中文网","age"："2"],
              ["name"："datatable中文网","age"："3"]
          ]
}

　　

如果想让表格头部固定高度可以增加配置参数 

scrollY: "300px"  300px 是自己自定义的数

Datatables更多应用

配置参数：http://datatables.club/reference/option/