DataTables表格插件使用說明

用戶84 發(fā)布于2019-08-01 16:40 / 713人閱讀

摘要：簡(jiǎn)介與的作用一樣，比更漂亮是一款表格插件。它是一個(gè)高度靈活的工具，可以將任何表格添加高級(jí)的交互功能。

DataTables簡(jiǎn)介

與EasyUI的Datagrid作用一樣，比easyui更漂亮

Datatables是一款jquery表格插件。它是一個(gè)高度靈活的工具，可以將任何HTML表格添加高級(jí)的交互功能。

支持分頁、排序、搜索

支持4種數(shù)據(jù)源

支持多種主題

擁有多種擴(kuò)展

文件引入

至少引入如下3個(gè)文件

多種樣式

Bootstrap 3

Foundation

Semantic UI

jQuery UI

Base

Bootstrap 4

導(dǎo)入的文件不同，具體請(qǐng)看官網(wǎng)示例：https://www.datatables.net

完整Table的HTML結(jié)構(gòu)

item1	item1	item1
item1	item1	item1

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

標(biāo)簽，然后再通過js渲染

初始化與常用配置

默認(rèn)初始化

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

配置初始化

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

常用配置項(xiàng)

info //是否顯示左下角信息
ordering  //是否開啟排序
paging  //是否開啟分頁
searching  //是否開啟查詢
serverSide
ajax
data
lengthMenu: [ 10, 25, 50, 75, 100 ]  //定義每頁顯示記錄數(shù)

DataTables支持四種數(shù)據(jù)源

HTML(DOM)數(shù)據(jù)源——后臺(tái)模板拼接


    
        
            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數(shù)據(jù)源(Array/Objects)——優(yōu)先級(jí)比HTMLDOM高

有2種類型：

二維數(shù)組：
var dataSet = [
    [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
    [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ]
];

對(duì)象數(shù)組(必須配合columns配置項(xiàng))：
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數(shù)據(jù)源

服務(wù)器返回的數(shù)據(jù)格式必須是：
{
    "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數(shù)據(jù)源

服務(wù)器返回的數(shù)據(jù)格式：
{
    "draw" : 1,
    "recordsTotal" : 20,
    "recordsFiltered" : 20,
    "data" : [
        [],[]
    ]
}

自定義列

在DataTables表格初始化的時(shí)候進(jìn)行初始化，使用columns或者columnDefs屬性進(jìn)行自定義列的信息

能自定義列的標(biāo)題、顯示內(nèi)容、樣式、別名、數(shù)據(jù)綁定、是否提供排序、是否提供搜索過濾、列寬、默認(rèn)內(nèi)容等等

示例

$("#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
    ]
});

服務(wù)器模式的請(qǐng)求參數(shù)

當(dāng)使用服務(wù)器模式"serverSide" : true時(shí)，瀏覽器會(huì)發(fā)出一個(gè)GET請(qǐng)求來獲取數(shù)據(jù)源

請(qǐng)求的查詢參數(shù)如下：

draw:1   //請(qǐng)求次數(shù)，用于響應(yīng)是也要帶回來
columns[0][data]:0       //第一列綁定的數(shù)據(jù)源標(biāo)識(shí)，二維數(shù)組就是數(shù)字，對(duì)象數(shù)組就是key
columns[0][name]:engine      //第一列別名
columns[0][searchable]:false //不可搜索
columns[0][orderable]:true   //不可排序
columns[0][search][value]:   //搜索的條件
columns[0][search][regex]:false   //搜索是否使用正則

.....  //有多少列就有多少個(gè)columns[n]

order[0][column]:0   //指定排序的列
order[0][dir]:asc    //指定列的排序方式
start:0     //起始下標(biāo)
length:10   //每頁記錄數(shù)
search[value]:    //全局搜索條件
search[regex]:false   //全局搜索是否使用正則
_:1492657609627      //自帶標(biāo)示不用理會(huì)

國(guó)際化

在DataTables表格初始化時(shí)，使用language屬性對(duì)表格中的文字信息進(jìn)行靈活修改

示例：

$("#example").dataTable( {
    "language": {
        "processing": "DataTables is currently busy",
        "emptyTable": "No data available in table",
        "info": "Showing page _PAGE_ of _PAGES_",
        "lengthMenu": "每頁顯示 _MENU_ 條記錄",
        "search": "搜索:"
    }
} );

查詢過濾（搜索）

列表項(xiàng)目

自定義表格控制元素

在DataTables表格控件初始化時(shí)，使用dom屬性和initComplete回調(diào)函數(shù)來統(tǒng)一配置

應(yīng)用場(chǎng)景：把自定義按鈕集成到DataTables上面

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

自定義表格DOM最好把柵格加進(jìn)去

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

drawCallback比initComplete優(yōu)先執(zhí)行

整合iCheck復(fù)選框

Html結(jié)構(gòu)

  //表頭

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");
        }
    });
}

云服務(wù)器 GPU云服務(wù)器 datatables插件 datatables插件用法 php+表格插件 js數(shù)據(jù)表格插件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/50670.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

用戶84

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 2706·2023-04-26 02:02
tensorflow-hub

閱讀 2571·2023-04-25 20:38
物聯(lián)網(wǎng)-thingsboard源碼編譯安裝踩坑記錄

閱讀 4098·2021-09-26 09:47
【IoT】產(chǎn)品設(shè)計(jì)：OEM、ODM、EMS 的區(qū)別是什么？

閱讀 3092·2021-09-10 10:50
測(cè)試管理之項(xiàng)目軟件測(cè)試風(fēng)險(xiǎn)管理實(shí)踐

閱讀 3765·2021-09-07 09:58
總結(jié)了17年初到18年初百場(chǎng)前端面試的面試經(jīng)驗(yàn)(含答案)

閱讀 3326·2019-08-30 15:54
前端每日實(shí)戰(zhàn)：74# 視頻演示如何用純 CSS 創(chuàng)作一臺(tái) MacBook Pro

閱讀 2694·2019-08-30 15:54
學(xué)習(xí)CSS中的BFC

閱讀 1918·2019-08-29 17:03

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

DataTables表格插件使用說明

相關(guān)文章

Datatables表格插件學(xué)習(xí)