DataTables表格插件使用说明

bovenson 发布于2019-08-20 15:52 / 2640人阅读

摘要：简介与的作用一样，比更漂亮是一款表格插件。它是一个高度灵活的工具，可以将任何表格添加高级的交互功能。

DataTables简介

与EasyUI的Datagrid作用一样，比easyui更漂亮

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

支持分页、排序、搜索

支持4种数据源

支持多种主题

拥有多种扩展

文件引入

至少引入如下3个文件

多种样式

Bootstrap 3

Foundation

Semantic UI

jQuery UI

Base

Bootstrap 4

导入的文件不同，具体请看官网示例：https://www.datatables.net

完整Table的HTML结构

item1	item1	item1
item1	item1	item1

想使用DataTables表格插件，至少要写

标签，然后再通过js渲染

初始化与常用配置

默认初始化

$("#example").DataTable();

配置初始化

$("#example").DataTable({
    "scrollY" : 350,
    "ajax" : "http://wt.com",
    "serverSide" : true
});

常用配置项

info //是否显示左下角信息
ordering  //是否开启排序
paging  //是否开启分页
searching  //是否开启查询
serverSide
ajax
data
lengthMenu: [ 10, 25, 50, 75, 100 ]  //定义每页显示记录数

DataTables支持四种数据源

HTML(DOM)数据源——后台模板拼接


    
        
            Name
            Position
            Office
            Age
            Start date
            Salary
        
    
    
        
            Name
            Position
            Office
            Age
            Start date
            Salary
        
    
    
        
            Tiger Nixon
            System Architect
            Edinburgh
            61
            2011/04/25
            $320,800
        
        
            Cedric Kelly
            Senior Javascript Developer
            Edinburgh
            22
            2012/03/29
            $433,060

Name	Position	Office	Age	Start date	Salary
Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060

Javascript数据源(Array/Objects)——优先级比HTMLDOM高

有2种类型：

二维数组：
var dataSet = [
    [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
    [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ]
];

对象数组(必须配合columns配置项)：
var dataSet = [
    {
        "name":       "Tiger Nixon",
        "position":   "System Architect",
        "salary":     "$3,120",
        "start_date": "2011/04/25",
        "office":     "Edinburgh",
        "extn":       "5421"
    },
    {
        "name":       "Garrett Winters",
        "position":   "Director",
        "salary":     "$5,300",
        "start_date": "2011/07/25",
        "office":     "Edinburgh",
        "extn":       "8422"
    }
];

$(document).ready(function() {
    $("#example").DataTable( {
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    } );
} );

Ajax with client-side processing数据源

服务器返回的数据格式必须是：
{
    "data": [
        [
          "Howard Hatfield",
          "Office Manager",
          "San Francisco",
          "7031",
          "2008/12/16",
          "$164,500"
        ],
        [
          "Hope Fuentes",
          "Secretary",
          "San Francisco",
          "6318",
          "2010/02/12",
          "$109,850"
        ]
    ]
}
或者
{
    "data": [
        {
            "name":       "Tiger Nixon",
            "position":   "System Architect",
            "salary":     "$3,120",
            "start_date": "2011/04/25",
            "office":     "Edinburgh",
            "extn":       "5421"
        },
        {
            "name":       "Garrett Winters",
            "position":   "Director",
            "salary":     "$5,300",
            "start_date": "2011/07/25",
            "office":     "Edinburgh",
            "extn":       "8422"
        }
    ]
}

$(document).ready(function() {
    $("#example").DataTable( {
        "ajax": "../ajax/data/arrays.txt"
    } );
} );
或
$(document).ready(function() {
    $("#example").DataTable( {
        "ajax": {
            "url": "data.json",
            "data": {
                "user_id": 451
            }
        }
    } );
} );

Ajax with server-side processing数据源

服务器返回的数据格式：
{
    "draw" : 1,
    "recordsTotal" : 20,
    "recordsFiltered" : 20,
    "data" : [
        [],[]
    ]
}

自定义列

在DataTables表格初始化的时候进行初始化，使用columns或者columnDefs属性进行自定义列的信息

能自定义列的标题、显示内容、样式、别名、数据绑定、是否提供排序、是否提供搜索过滤、列宽、默认内容等等

示例

$("#example").DataTable({
    "ajax" : "{:U("getList")}",
    "serverSide" : true,
    "columns": [
        {
            "searchable": false,
            "name": "engine",
            "title" : "wutao",
            "orderable": false,
            "className": "my_class",
            "render": function ( data, type, full, meta ) {
                return "Download";
            }
        },
        null
    ]
});

服务器模式的请求参数

当使用服务器模式"serverSide" : true时，浏览器会发出一个GET请求来获取数据源

请求的查询参数如下：

draw:1   //请求次数，用于响应是也要带回来
columns[0][data]:0       //第一列绑定的数据源标识，二维数组就是数字，对象数组就是key
columns[0][name]:engine      //第一列别名
columns[0][searchable]:false //不可搜索
columns[0][orderable]:true   //不可排序
columns[0][search][value]:   //搜索的条件
columns[0][search][regex]:false   //搜索是否使用正则

.....  //有多少列就有多少个columns[n]

order[0][column]:0   //指定排序的列
order[0][dir]:asc    //指定列的排序方式
start:0     //起始下标
length:10   //每页记录数
search[value]:    //全局搜索条件
search[regex]:false   //全局搜索是否使用正则
_:1492657609627      //自带标示不用理会

国际化

在DataTables表格初始化时，使用language属性对表格中的文字信息进行灵活修改

示例：

$("#example").dataTable( {
    "language": {
        "processing": "DataTables is currently busy",
        "emptyTable": "No data available in table",
        "info": "Showing page _PAGE_ of _PAGES_",
        "lengthMenu": "每页显示 _MENU_ 条记录",
        "search": "搜索:"
    }
} );

查询过滤（搜索）

列表项目

自定义表格控制元素

在DataTables表格控件初始化时，使用dom属性和initComplete回调函数来统一配置

应用场景：把自定义按钮集成到DataTables上面

$("#example").dataTable( {
    "dom": "l<"#customid">ftip"，
    "initComplete": function(){
        $("#customid").append("");
    }
} );

自定义表格DOM最好把栅格加进去

$("#example").dataTable( {
    "dom": "<".row"<"#customid.col-xs-4"><".col-xs-8"f>><".row"<".col-xs-12"t>>",
    "initComplete": function(){
        $("#customid").append("");
    }
} );

drawCallback比initComplete优先执行

整合iCheck复选框

Html结构

  //表头

JS部分

$("#example").DataTable({
    "ajax" : "{:U("getList")}",
    "serverSide" : true,
    "columns": [
        {
            "render": function ( data, type, row, meta ) {
                return "";
            }
        },
        null
    ],
    "drawCallback": function(){
        checkbox_init();
    }
});

//全选，全不选
function checkbox_init(){
    $(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",})

    $("#checkAll").on("ifChecked", function(event){
        $(this).off("ifUnchecked");
        $(".item").iCheck("check");
        $(this).on("ifUnchecked", function(event){
            $(".item").iCheck("uncheck");
        })
    });

    $(".item").on("ifUnchecked",function(event){
        $("#checkAll").off("ifUnchecked");
        $("#checkAll").iCheck("uncheck");
    }).on("ifChecked",function(event){
        var state = true;
        $(".item").each(function(i){
            if(!$(this).is(":checked")){
                state = false;
            }
        });
        if(state){
            $("#checkAll").iCheck("check");
        }
    });
}

云服务器 GPU云服务器 datatables插件 datatables插件用法 php+表格插件 js数据表格插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82549.html

Datatables表格插件学习

摘要：是一款表格插件。当你打开服务器模式的时候，每次绘制表格的时候，会给服务器发送一个请求包括当前分页，排序，搜索参数等等。开启服务器模式需要使用和不定时一讲选项，进一步的信息，请参考下面的配置选项。 Datatables 是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能，可以很方便的实现分页，即时搜索和排序。一、简单使用怎样简单地使用Data...

Lyux 2019-08-20 18:20 评论0 收藏0
DataTables表格插件使用说明

摘要：简介与的作用一样，比更漂亮是一款表格插件。它是一个高度灵活的工具，可以将任何表格添加高级的交互功能。 DataTables简介与EasyUI的Datagrid作用一样，比easyui更漂亮 Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。支持分页、排序、搜索支持4种数据源支持多种主题拥有多种扩展文件引入 ...

weij 2019-08-29 12:26 评论0 收藏0
DataTables表格插件使用说明

摘要：简介与的作用一样，比更漂亮是一款表格插件。它是一个高度灵活的工具，可以将任何表格添加高级的交互功能。 DataTables简介与EasyUI的Datagrid作用一样，比easyui更漂亮 Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。支持分页、排序、搜索支持4种数据源支持多种主题拥有多种扩展文件引入 ...

用户84 2019-08-01 16:40 评论0 收藏0
实现DataTables搜索框查询结果高亮显示

摘要：宋体三搜索框查询结果高亮显示的其他方法宋体。宋体四总结宋体实现搜索框查询结果高亮显示的功能需要引入文件，文中提供了种这类文件，并说明了要配套编写的相关代码。DataTables是封装好的HTML表格插件，丰富了HTML表格的样式，提供了即时搜索、分页等多种表格高级功能。用户可以编写很少的代码（甚至只是使用官方的示例代码），做出一个漂亮的表格以展示数据。关于DataTables的更多信息，请查...

番茄西红柿 2019-04-23 13:17 评论0 收藏0
Springmvc 结合 jquery插件Datatables的使用（基于java支持的服务器处理）

摘要：但是这个插件本身还是挺不错的，对于报表的支持比较好。下面应该写服务端了，这呢随机获取表格数据表格数据以格式返回，返回大概就是这样了。前言觉得Datatables的中文文档写的太差劲了，开发手册和文档都是很不友好，demo也不够完善，不适合直接想使用的人来看，需要用过一段时间之后再来看可能才会有柳暗花明的发现，不然就有点不明所以的感觉。但是这个插件本身还是挺不错的，对于报表的支持比...

dcr309duan 2019-08-22 16:00 评论0 收藏0