1.datable blog

時間 2019-11-11

標籤 1.datable datable blog 简体版

原文原文鏈接

1. 如何此入datatable-editor插件javascript

答：配置以下文件：php

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
<link th:href="@{/datatables/datatables.css}" rel="stylesheet"/>
<link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
<link th:href="@{/editor/css/editor.dataTables.css}" rel="stylesheet"/>
<link th:href="@{/editor/css/select.dataTables.min.css}" rel="stylesheet"/>
<script th:src="@{/datatables/datatables.js}"></script>
<script th:src="@{/editor/js/dataTables.editor.js}"></script>
<script th:src="@{/editor/js/dataTables.select.min.js}"></script>

重啓IDEA好了css

2.如何選用插件html

http://datatables.club/blog/2016/11/11/dataTables-vs-easyui-datagrid-basic-configuration.htjava

基礎
- 排序
- 分頁
- 搜索
- 美觀
- 合理的配置
高級
- 單擊和雙擊行事
- 選擇高亮顯示
- 增刪改查
- 列寬拖動
- 數據導出
- 添加序號
進階
- 支持的數據類型
- 行內編輯
- 合併單元格
- 自定義表頭
- 高擴展性
- 易用的API
- 模塊化

3. dataTable options配置jquery

var table = $('#example').DataTable({
    "deferLoading": null,
    "destroy": false,
    "displayStart": 0,
    "dom": "lfrtip",
    "lengthMenu": [10, 25, 50, 100],
    "order": [[0, 'asc']],
    "orderCellsTop": false,
    "orderClasses": true,
    "orderFixed": [0, 'asc'],
    "orderMulti": true,
    "pageLength": 10,
    "pagingType": "simple_numbers",
    "renderer": "bootstrap",
    "retrieve": false,
    "rowId": "DT_RowId",
    "scrollCollapse": false,
    "search": {
        "caseInsensitive": true,
        "regex": false,
        "search": "Fred",
        "smart": true
    },
    "searchCols": [
        null, {
        "search": "My filter"
        },
        null,
        {
            "search": "^[0-9]",
            "escapeRegex": false
        }
    ],
    "searchDelay": null,
    "stateDuration": 7200,
    "stripeClasses": ['odd', 'even'],
    "tabIndex": 0
});

4. DataTables初始化對照模板2（所有option - Data 數據）

http://datatables.club/manual/daily/2016/05/12/all-options-of-data.htmlajax

var table = $('#example').DataTable( {
  "ajax": {
    "url": "data.json",
    "type": "POST",
    "dataSrc": "data",
    "data": {
        "user_id": 451
    }
  },
  "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": "5300",
          "start_date": "2011/07/25",
          "office": "Edinburgh",
          "extn": "8422"
      },
      // ...

  ],
  //這裏是爲了配合上面的data，因此要寫出了，以後會有對 columns 更詳細的結構

  "columns": [
      { "data": "name" },
      { "data": "position" },
      { "data": "office" },
      { "data": "extn" },
      { "data": "start_date" },
      { "data": "salary" }
  ]
} );

5. DataTables初始化對照模板5（所有option - Columns 列配置）json

http://datatables.club/manual/daily/2016/05/12/all-options-of-columns.htmlbootstrap

var table = $('#example').DataTable({
    "columns": [{
        "cellType": "td",
        "className": "my_class",
        "contentPadding": "mmm",
        "createdCell": function(td, cellData, rowData, row, col) {
            if (cellData < 1) {
                $(td).css('color', 'red')
            }
        },
        "data": "engine",
        "defaultContent": "<i>Not set</i>",
        "name": "engine",
        "orderable": true,
        "orderData": [0, 1],
        "orderDataType": "dom-text",
        "orderSequence": ["asc"],
        "render": function(data, type, full, meta) {
            return '<a href="' + data + '">Download</a>';
        },
        "searchable": true,
        "title": "My column title",
        "type": "html",
        "visible": true,
        "width": "20%",
    }]
});

var table = $('#example').DataTable({
    "columnDefs": [{
        "targets": 0,
        "cellType": "td",
        "className": "my_class",
        "contentPadding": "mmm",
        "createdCell": function(td, cellData, rowData, row, col) {
            if (cellData < 1) {
                $(td).css('color', 'red')
            }
        },
        "data": "engine",
        "defaultContent": "<i>Not set</i>",
        "name": "engine",
        "orderable": true,
        "orderData": [0, 1],
        "orderDataType": "dom-text",
        "orderSequence": ["asc"],
        "render": function(data, type, full, meta) {
            return '<a href="' + data + '">Download</a>';
        },
        "searchable": true,
        "title": "My column title",
        "type": "html",
        "visible": true,
        "width": "20%",
    }]
});

6.DataTables初始化對照模板3（所有option - Callbacks 回調函數）

   http://datatables.club/manual/daily/2016/05/12/all-options-of-callbacks.html

var table = $('#example').DataTable({
    "createdRow": function(row, data, dataIndex) {
        if (data[4] == "A") {
            $(row).addClass('important');
        }
    },
    "drawCallback": function(settings) {
        alert('DataTables has redrawn the table');
    },
    "footerCallback": function(tfoot, data, start, end, display) {
        $(tfoot).find('th').eq(0).html("Starting index is " + start);
    },
    "formatNumber": function(toFormat) {
        return toFormat.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "'");
    },
    "headerCallback": function(thead, data, start, end, display) {
        $(thead).find('th').eq(0).html('Displaying ' + (end - start) + ' records');
    },
    "infoCallback": function(settings, start, end, max, total, pre) {
        return start + " to " + end;
    },
    "initComplete": function(settings, json) {
        alert('DataTables has finished its initialisation.');
    },
    "preDrawCallback": function(settings) {
        $('#example tbody').off('click', 'td');
    },
    "rowCallback": function(row, data, index) {
        if (data.grade == "A") {
            $('td:eq(4)', row).html('<b>A</b>');
        }
    },
    "stateLoadCallback": function(settings) {
        var o;
        // Send an Ajax request to the server to get the data. Note that

        // this is a synchronous request since the data is expected back from the

        // function

        $.ajax({
            "url": "/state_load",
            "async": false,
            "dataType": "json",
            "success": function(json) {
                o = json;
            }
        });
        return o;
    },
    "stateLoaded": function(settings, data) {
        alert('Saved filter was: ' + data.search.search);
    },
    "stateLoadParams": function(settings, data) {
        data.search.search = "";
    },
    "stateSaveCallback": function(settings, data) {
        // Send an Ajax request to the server with the state object

        $.ajax({
            "url": "/state_save",
            "data": data,
            "dataType": "json",
            "type": "POST",
            "success": function() {}
        });
    },
    "stateSaveParams": function(settings, data) {
        data.search.search = "";
    }
});

7.option stripeClasses 給表格行設置條紋樣式

http://datatables.club/manual/daily/2016/05/11/option-stripeClasses.html數組

默認狀況下，Datatables就已經把行和行區分開了，使用的是 $.fn.dataTable.ext.classes.stripe* 選項，值爲 odd 和 even

stripeClassesOption stripeClasses不定時一講 接受的是一個數組

定義三個不一樣的樣式


1
2
3
var table = $('#example').DataTable( {
  "stripeClasses": [ 'strip1', 'strip2', 'strip3' ]
} );

stripeClasses 能夠是任意長度的數組，你設置2個，那麼就1 2 ， 1 2 ， 1 2 這麼循環，若是設置3個就是 1 2 3， 1 2 3， 1 2 3，這麼循環

8. option dom 自定義佈局表格

http://datatables.club/manual/daily/2016/05/11/option-dom.html

9.option rowId 給每行（tr）自動綁定上惟一id

http://datatables.club/manual/daily/2016/05/06/option-rowId.html

10.option DT_RowData 使用jQuery.data()方法給每行（tr）綁定數據

http://datatables.club/manual/daily/2016/05/06/option-DT_RowData.html

12.如何定位問題（js調試基本技能）

http://datatables.club/manual/daily/2016/04/22/how-to-find-the-questions-basic-debug-skill-of-javascript.html

切換到network功能，在這裏能夠看到全部的資源請求，那麼這裏咱們根據代碼裏定義的數據url arrays.txt 關鍵字在搜索框裏過濾後找到咱們的請求。從上兩個圖能夠在headers部分看到請求的url，請求的參數，在preview部分能夠看到返回的數據，那麼當你遇到問題後不知道怎麼解決的時候，就應該從這些地方檢察，或者貼圖在羣裏。切記不要空喊，爲何沒效果，爲何？爲何？爲何？ 不貼代碼，不貼效果圖片，不貼錯誤提示，咱們也不知道爲何。

最後再說一點，使用console.log() 替換 alert() ,不說console.log()是最好用的，但至少比alert()強百倍，在調試代碼的過程當中絕對是大臣。但願從這一講中，你們在遇到問題時，能更快速的定位到問題，即使本身不能快速定位，把這些信息都貼到羣裏，羣友也能幫你快速定位到問題所在

13 option ajax data 根據參數查詢表格數據

http://datatables.club/manual/daily/2016/04/21/option-ajax-data.html

這連續幾天講的都是關於dt怎麼取數，今天講講怎麼傳參數給服務器。平時咱們都有這樣的應用場景，好比根據時間，或者input框的值做爲查詢條件顯示錶格數據基本用法：

var table = $("#tableid").DataTable({
    ajax:{
        url:"data.action",
        type:"POST",
       data:{
            beginDate:"2016-04-18",
            endDate:"2016-04-21"
        }
    },
    columns:[
        {data:"name"},
        {data:"age"}
    ]
});

看到上面的代碼，我不得不又把jQuery的ajax又拿出來講，應爲這個能夠說就是jQuery的ajax，基本是同樣的用法，下面看看jQuery的ajax


$.ajax({
    url:"data.action",
    type:"POST",
   data:{
        args1:"123",
        args2:"456"
    },
    success:function(result){
        console.log(result);
    }
});

是否是發現是基本如出一轍的？不用對比了，其實就是同樣的，那麼這兩段代碼的含義就是帶上了兩個參數，這樣在服務器就能夠接收到

好比服務器語言是java，那麼你能夠這麼接受

request.getParameter("beginDate");//獲取到起始時間，截止時間類同

若是你是php，那麼你能夠這麼接受

$_POST['beginDate'];

這樣你就能夠根據頁面傳來的參數對數據進行處理，達到根據條件改變表格裏的數據的效果。不過上面的代碼都是傳靜態的值，平時應用更多的是從一個時間控件或者input取值，那麼就這樣作

var table = $("#tableid").DataTable({
    ajax:{
        url:"data.action",
        type:"POST",
        data:{
            beginDate:$("#beginDate").val(),
            endDate:$("#endDate").val()
        }
    },
     columns:[
         {data:"name"},
         {data:"age"}
     ]
});

14.option ajax dataSrc （下） 對返回數據進行處理

http://datatables.club/manual/daily/2016/04/20/option-ajax-dataSrc2.html

接着昨天的dataSrc做爲function時能處理什麼複雜的狀況呢？在這裏能夠把dataSrc和jQuery的ajax的success方法一塊兒看，或者對於Datatables來講dataSrc是success的擴展、增強

$.ajax({ url:"data.json", success:function(result){ //result其實就是data.json的數據，那麼當服務器返回的數據格式不是Datatables所支持的格式怎麼辦？這個時候就能夠用到dataSrc來處理這個狀況 } }) $.ajax({ url:"data.json", success:function(result){ //result其實就是data.json的數據，那麼當服務器返回的數據格式不是Datatables所支持的格式怎麼辦？這個時候就能夠用到dataSrc來處理這個狀況 } })

先假設data.json的數據格式以下：

{ msg:"成功返回數據", listdata:{ treeData:[ {id:1,pid:0,name:"節點一"}, {id:2,pid:1,name:"節點二"} ], tableData:{ page:1, draw:1, size:58, filter_size:2, data:[ {name:"中文網",age:2}, {name:"datatables",age:3} ] } }, status:true } { msg:"成功返回數據", listdata:{ treeData:[ {id:1,pid:0,name:"節點一"}, {id:2,pid:1,name:"節點二"} ], tableData:{ page:1, draw:1, size:58, filter_size:2, data:[ {name:"中文網",age:2}, {name:"datatables",age:3} ] } }, status:true }

相信不少小夥伴的數據格式比這個還要複雜，各類嵌套，各類包含，那麼這裏注意一點，認清Datatables所支持的格式（參考服務器模式），把這點弄明白，實際上就不難了，看下面代碼，怎麼使用上面所示格式的數據交給Datatables去處理

var table = $("#tableid").DataTable({ ajax:{ url:"data.json", dataSrc:function(result){ //這裏result和上面jquery的ajax的代碼相似，也是能夠獲得data.json的數據，可是這樣的格式，Datatables不能直接使用，這時候須要在這裏處理一下 //直接返回Datatables須要的那部分數據便可，看到這裏，你們或許又懂了些什麼看到了他的強大和靈活 return result.listdata.tableData.data; } }, columns:[ {data:"name"}, {data:"age"} ] });var table = $("#tableid").DataTable({ ajax:{ url:"data.json", dataSrc:function(result){ //這裏result和上面jquery的ajax的代碼相似，也是能夠獲得data.json的數據，可是這樣的格式，Datatables不能直接使用，這時候須要在這裏處理一下 //直接返回Datatables須要的那部分數據便可，看到這裏，你們或許又懂了些什麼看到了他的強大和靈活 return result.listdata.tableData.data; } }, columns:[ {data:"name"}, {data:"age"} ] });

更新：2017年6月25日

對於使用服務器模式的小夥伴，參考以下代碼：

14 option ajax dataSrc （上）改變默認的data屬性取值

http://datatables.club/manual/daily/2016/04/19/option-ajax-dataSrc1.html

今天講的參數dataSrc是屬於ajax下的一個屬性，他相似於jQuery ajax的success方法，廢話少說看下面的代碼基本用法：

$("#tableid").DataTable({ ajax:{ url:"data.json", dataSrc:"tabledata" }, columns:[ {data:"name"}, {data:"age"} ] }); $("#tableid").DataTable({ ajax:{ url:"data.json", dataSrc:"tabledata" }, columns:[ {data:"name"}, {data:"age"} ] });

通常來講咱們在定義一個接口的返回json數據格式（假設下面的數據爲data.json的數據），會有msg（反饋信息），status（返回狀態），data（返回數據）等等，具體看下面的數據格式

{ msg:"查詢成功", status:true, data:[ {name:"datatables中文網",age:2}, {name:"datatatble不定時一說",age:0} ] } { msg:"查詢成功", status:true, data:[ {name:"datatables中文網",age:2}, {name:"datatatble不定時一說",age:0} ] }

對於上面的格式可能不太陌生，固然不是每個人都會這麼去作，那麼數據格式的多樣性就會讓不少一開始接觸Datatables的小夥伴無從下手，不知道怎麼封裝數據，或者和dt支持的數據格式不匹配，那麼下面告訴你們dataSrc參數的用處，他能夠接受一個字符串，也能夠接受一個function。做爲字符串的時候： dataSrc:"tabledata" 這個tabledata是什麼意思，下面看一段代碼

$.ajax({ url:"data.json", success:function(result){ //在這個簡單的ajax中，咱們要使用返回的數據，直接就用result便可，那麼咱們要用上面數據中data的數據怎麼辦？ //很簡單，result.data 便可以取到咱們要的數據，那麼tabledata的意思就在這裏 } }) $.ajax({ url:"data.json", success:function(result){ //在這個簡單的ajax中，咱們要使用返回的數據，直接就用result便可，那麼咱們要用上面數據中data的數據怎麼辦？ //很簡單，result.data 便可以取到咱們要的數據，那麼tabledata的意思就在這裏 } })

若是咱們的數據是以下格式，能夠看到這裏只是把【data】換成了【tabledata】，是否是稍微懂些了？

{ msg:"查詢成功", status:true, tabledata:[ {name:"datatables中文網",age:2}, {name:"datatatble不定時一說",age:0} ] } { msg:"查詢成功", status:true, tabledata:[ {name:"datatables中文網",age:2}, {name:"datatatble不定時一說",age:0} ] }

在返回去看最上面的那段代碼，dataSrc:」tabledata」這個的意思就是至關於dt本身封裝了result.tabledata, 取到數據後循環生成tr和td，只是dt默認的這個屬性是data，可是平時項目中這個可能已經被定義了，沒辦法修改了，那麼就在dt初始化的時候配置上，告訴dt我用的是那個屬性

看完上面的說明，對dataSrc是否有必定的瞭解呢?固然這個可能仍是沒法知足實際的要求，那麼就等明天介紹當他接受一個function的時候，怎麼處理更復雜的狀況

14 option ajax 異步取數

http://datatables.club/manual/daily/2016/04/18/option-ajax.html

今天講的參數是ajax，相信你們不陌生，用過jQuery的人對這個應該很熟悉。dt是基於jquery作的表格插件，因此dt在讀取數據時也用了jquery的ajax，雖然是相似，可是有增強，下面看ajax的用法吧。基本語法：

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

data.json - 是一個url或者資源文件，數據格式是這樣的

{ data:[ {name:"DataTables中文網",age:2}, {name:"DataTables中文網2",age:3} ] } { data:[ {name:"DataTables中文網",age:2}, {name:"DataTables中文網2",age:3} ] }

你還可使用數組格式，以下

{ data:[ ["DataTables中文網",2],["DataTables中文網2",3] ] } { data:[ ["DataTables中文網",2],["DataTables中文網2",3] ] }

若是數據格式爲上面的，那麼初始化代碼能夠簡化下：

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

之因此能不寫columns是由於dt默承認以處理數組格式的數據,按照數組的順序0,1，2……對應第一列，第二列

1. .net對象轉Datable
2. Blog.1 database.sql.driver
3. blog筆錄1
4. nodejs+express開發blog（1）
5. python django 做一個blog(1)
6. vue - blog開發學習1
7. datable中table.row() not a funtion 解決方法
8. Blog
9. blog
10. BLOG
更多相關文章...
• RSS 發佈您的 Feed - RSS 教程
• RSS 閱讀器 - RSS 教程
• YAML 入門教程
• Flink 數據傳輸及反壓詳解

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。