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

資訊專欄INFORMATION COLUMN

DataTables表格插件使用說明

bovenson / 2662人閱讀

摘要:簡介與的作用一樣,比更漂亮是一款表格插件。它是一個高度靈活的工具,可以將任何表格添加高級的交互功能。

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

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

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82549.html

相關文章

  • Datatables表格插件學習

    摘要:是一款表格插件。當你打開服務器模式的時候,每次繪制表格的時候,會給服務器發送一個請求包括當前分頁,排序,搜索參數等等。開啟服務器模式需要使用和不定時一講選項,進一步的信息,請參考下面的配置選項。 Datatables 是一款jquery表格插件。它是一個高度靈活的工具,可以將任何HTML表格添加高級的交互功能,可以很方便的實現分頁,即時搜索和排序。 一、簡單使用 怎樣簡單地使用Data...

    Lyux 評論0 收藏0
  • DataTables表格插件使用說明

    摘要:簡介與的作用一樣,比更漂亮是一款表格插件。它是一個高度靈活的工具,可以將任何表格添加高級的交互功能。 DataTables簡介 與EasyUI的Datagrid作用一樣,比easyui更漂亮 Datatables是一款jquery表格插件。它是一個高度靈活的工具,可以將任何HTML表格添加高級的交互功能。 支持分頁、排序、搜索 支持4種數據源 支持多種主題 擁有多種擴展 文件引入 ...

    weij 評論0 收藏0
  • DataTables表格插件使用說明

    摘要:簡介與的作用一樣,比更漂亮是一款表格插件。它是一個高度靈活的工具,可以將任何表格添加高級的交互功能。 DataTables簡介 與EasyUI的Datagrid作用一樣,比easyui更漂亮 Datatables是一款jquery表格插件。它是一個高度靈活的工具,可以將任何HTML表格添加高級的交互功能。 支持分頁、排序、搜索 支持4種數據源 支持多種主題 擁有多種擴展 文件引入 ...

    用戶84 評論0 收藏0
  • 實現DataTables搜索框查詢結果高亮顯示

    摘要:宋體三搜索框查詢結果高亮顯示的其他方法宋體。宋體四總結宋體實現搜索框查詢結果高亮顯示的功能需要引入文件,文中提供了種這類文件,并說明了要配套編寫的相關代碼。DataTables是封裝好的HTML表格插件,豐富了HTML表格的樣式,提供了即時搜索、分頁等多種表格高級功能。用戶可以編寫很少的代碼(甚至只是使用官方的示例代碼),做出一個漂亮的表格以展示數據。關于DataTables的更多信息,請查...

    番茄西紅柿 評論0 收藏0
  • Springmvc 結合 jquery插件Datatables使用(基于java支持的服務器處理)

    摘要:但是這個插件本身還是挺不錯的,對于報表的支持比較好。下面應該寫服務端了,這呢隨機獲取表格數據表格數據以格式返回,返回大概就是這樣了。 前言 覺得Datatables的中文文檔寫的太差勁了,開發手冊和文檔都是很不友好,demo也不夠完善,不適合直接想使用的人來看, 需要用過一段時間之后再來看可能才會有柳暗花明的發現,不然就有點不明所以的感覺。但是這個插件本身還是挺不錯的,對于報表的支持比...

    dcr309duan 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<