Datatables Ajax源数据

1.说明

本节中的示例演示了Ajax在DataTables中加载数据以及客户端处理的使用。

1.1Ajax数据源（数组）

下面的示例显示DataTables从数组作为数据源加载表的数据。

脚本：

    $(document).ready(function () {
        $('#example').DataTable({
            ajax: 'http://localhost:9876/arrays.txt',
        });
    });

html：

    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

展示图：

1.2 Ajax数据源（对象）

在本例中，Ajax源返回一个对象数组，DataTables使用该数组显示表。

脚本：

    <script>
    $(document).ready(function () {
        $('#example').DataTable({
            ajax: 'http://localhost:9876/objects.txt',
            columns: [
                { data: 'name' },
                { data: 'position' },
                { data: 'office' },
                { data: 'extn' },
                { data: 'start_date' },
                { data: 'salary' },
            ],
        });
    });
    </script>

html：

    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

1.3 嵌套对象数据（对象）

下面的示例显示了DataTables从嵌套对象和数组中读取列的信息。

脚本：

    $(document).ready(function () {
        $('#example').DataTable({
            processing: true,
            ajax: 'http://localhost:9876/objects_deep.txt',
            columns: [
                { data: 'name' },
                { data: 'hr.position' },
                { data: 'contact.0' },
                { data: 'contact.1' },
                { data: 'hr.start_date' },
                { data: 'hr.salary' },
            ],
        });
    });

html：

    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

1.4 嵌套对象数据（数组）

脚本：

    $(document).ready(function () {
        $('#example').DataTable({
            ajax: 'http://localhost:9876/objects_subarrays.txt',
            columns: [
                { data: 'name[, ]' },
                { data: 'hr.0' },
                { data: 'office' },
                { data: 'extn' },
                { data: 'hr.2' },
                { data: 'hr.1' },
            ],
        });
    });

1.5 正交数据

在本例中，Ajax源返回一个对象数组，DataTables使用该数组显示表。

这可以通过使用columns.data选项来完成，使用该选项告诉DataTables要从数据源对象中为每个列使用哪个属性。

脚本：

    <script>
    $(document).ready(function () {
        $('#example').DataTable({
            ajax: 'http://localhost:9876/orthogonal.txt',
            columns: [
                { data: 'name' },
                { data: 'position' },
                { data: 'office' },
                { data: 'extn' },
                {
                    data: {
                        _: 'start_date.display',
                        sort: 'start_date.timestamp',
                    },
                },
                { data: 'salary' },
            ],
        });
    });
    </script>

1.6 为列生成的内容

此示例显示了如何使用columns.defaultContent在表的最后一列中创建按钮元素。一个简单的jQuery单击事件侦听器用于监视行上的单击，激活时使用row（）.data（）方法获取行的数据，并在警告框中显示有关该行的一些信息。

$(document).ready(function () {
    var table = $('#example').DataTable({
        ajax: 'data/arrays.txt',
        columnDefs: [
            {
                targets: -1,
                data: null,
                defaultContent: '<button>Click!</button>',
            },
        ],
    });
 
    $('#example tbody').on('click', 'button', function () {
        var data = table.row($(this).parents('tr')).data();
        alert(data[0] + "'s salary is: " + data[5]);
    });
});

1.7 平面阵列数据源

    $(document).ready(function () {
        $('#example').DataTable({
            ajax: {
                url: 'http://localhost:9876/objects_root_array.txt',
                dataSrc: '',
            },
            columns: [
                { data: 'name' },
                { data: 'position' },
                { data: 'office' },
                { data: 'extn' },
                { data: 'start_date' },
                { data: 'salary' },
            ],
        });
    });

1.8 延迟渲染以提高速度

    $(document).ready(function () {
        $('#example').DataTable({
            ajax: 'http://localhost:9876/arrays.txt',
            deferRender: true,
        });
    });

例子下载