Datatables(2)動態加載數據類型


上一篇的table內容通過DOM數據源顯示,即寫死在代碼里,這次就說說如何動態地加載數據:

首先datatables可識別數據分三種:
    數組(Arrays [])
    對象(objects {})
    實例(new myclass())

在給定table的header的情況下實現三種數據格式

(1)數組:首先你需要一個數組<數組>

var arr = [[1,2,3,4],[5,4,3,2]];

接下來通過data標簽獲取數組

    $('#table_id').DataTable( {
        'data': arr
    } );

 就獲得了

數據從第一列到最后一列按下標號自己對號入座
(2)對象

對象除了需要data加載數據還需要columns將數據對號入座,一般來說PHP返回的數據傾向數組而java返回傾向對象

如果java類為MyColumns含有屬性column1,column2,column3,column4,column5……

那么首先你需要一個數組<對象>

    var mycolumns = [
        {
            "column1":       "1",
            "column2":       "2",
            "column3":       "3",
            "column4":       "4",
            "column5":       "5"
        },
        {
            "column1":       "5",
            "column2":       "4",
            "column3":       "3",
            "column4":       "2",
            "column5":       "1"
        }
    ];

 接着你需要data獲取對象 並通過columns標簽來對每一列賦值

    $('#table_id_example').DataTable( {
        data: mycolumns,
        //使用對象數組,一定要配置columns,告訴 DataTables 每列對應的屬性
        //data 這里是固定不變的,name,position,salary,office 為你數據里對應的屬性
        columns: [
            { data: 'column1' },
            { data: 'column2' },
            { data: 'column3' },
            { data: 'column4' }
        ]
    } );

data:object_namecolumns:[{data:'column_name'}]

運行結果同(1)數組一樣

注意:object中有5個屬性 但是顯示以columns為標准

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM