高级javascript源数据-数据表

Advanced javascript sourced data - DataTables

本文关键字：数据表数据 javascript 高级更新时间：2023-09-26

使用javascript源数据初始化datatable的默认方式是使用data选项，据我所知，它接受数组的数组或对象的数组。

var arrayDataSet = [
    ['Trident', 'Internet Explorer 11', '11'],
    ['Blink', 'Chrome 35', '35'],
    ...
];
var objectDataSet = [
    {
        engine: 'Trident',
        browser: 'Internet Explorer 11',
        version: '11'
    },
    {
        engine: 'Blink',
        browser: 'Chrome 35',
        version: '35'
    }
    ...
];

我想使用createdRow选项虽然，并添加例如id和url上的每一行。我想用这样的数据进行初始化:

var otherDataSet = [
    {
        id: 'ie11',
        url: 'http://windows.microsoft.com/en-us/internet-explorer/download-ie',
        data: {
            engine: 'Trident',
            browser: 'Internet Explorer 11',
            version: '11'
        }
    },
    {
        id: 'chr35',
        url: 'https://www.google.com/chrome/browser/',
        data: {
            engine: 'Blink',
            browser: 'Chrome 35',
            version: '35'
        }
    }
];

有可能吗?

这是可以做到的。您需要在列的配置对象中设置data属性，以设置每个列应该使用的数据位置。然后，您可以引用createdRow回调中的任何其他字段。这是一个工作小提琴:http://jsfiddle.net/V7bBg/2/

var otherDataSet = [
    {
        id: 'ie11',
        url: 'http://windows.microsoft.com/en-us/internet-explorer/download-ie',
        data: {
            engine: 'Trident',
            browser: 'Internet Explorer 11',
            version: '11'
        }
    },
    {
        id: 'chr35',
        url: 'https://www.google.com/chrome/browser/',
        data: {
            engine: 'Blink',
            browser: 'Chrome 35',
            version: '35'
        }
    }
];

$(document).ready(function() {
    $('#example').dataTable( {
        "data": otherDataSet,
        //define the columns and set the data property for each column
        "columns": [
            { "title": "Engine",  "data": "data.engine" },
            { "title": "Browser", "data": "data.browser"},
            { "title": "Version", "data": "data.version"}
        ],
        "createdRow": function ( row, data, index ) {
            //adding id and url as attributes to the row
            $(row).attr('id',data.id).attr('data-url',data.url);
        }
    } );            
});