Question

使用javascript源数据初始化dataTable的default way使用data option，并且据我所知它接受数组数组或对象数组。

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'
        }
    }
];

有可能吗？

Answer 1

是的，这可以做到。您需要在列配置对象中设置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);
        }
    } );            
});

高级JavaScript源数据 - DataTables

1 个答案: