使用PHP数组作为DataTables的数据源 [英] Use PHP Array As Data Source For DataTables

问题描述

我是jQuery的新手，正在尝试将jQuery数组用作jQuery DataTable的数据源.数组完全按照我的需要进行设置，而我已经通过使用echo json_encode($ data);

I am new to jQuery and am attempting to use jQuery array as the datasource for the jQuery DataTable. The array is set-up exactly as I need, and I have verified such from using echo json_encode($data);

这是我正在使用的jQuery代码....

And this is the jQuery code I'm using....

<script type="text/javascript">
var information = <?php echo json_encode($data) ?>;
alert(information.toString());
    $(document).ready(function () {
        $('#my-table').dataTable({
            data: information,
            columns: [
                { title: 'Salesman' },
                { title: 'Office' },
                { title: 'Title' },
                { title: 'Salary' }
            ]
        });
    });
</script>

推荐答案

在PHP中，您有一个变量数组的示例:

An example you have an array of variable in PHP :

<?php
$information = array(
    array("Salesman1" => "Harris 1","Title"=>"Consulting JavaScript Architect","Office"=>"Home","Salary"=>"500000.00"),
    array("Salesman2" => "Harris 2","Title"=>"Consulting JavaScript Architect","Office"=>"Home","Salary"=>"500000.00"),
    array("Salesman3" => "Harris 3","Title"=>"Consulting JavaScript Architect","Office"=>"Home","Salary"=>"500000.00"),
    array("Salesman4" => "Harris 4","Title"=>"Consulting JavaScript Architect","Office"=>"Home","Salary"=>"500000.00"),
    array("Salesman5" => "Harris 5","Title"=>"Consulting JavaScript Architect","Office"=>"Home","Salary"=>"500000.00")
);
?>

我们想使用json_encode函数将其输出为JSON格式:

And we want to output it as JSON format using json_encode function:

<?php
 echo json_encode($information);
?>

会产生这个:

[{"Salesman":"Harris 1"，"Title":"Consulting JavaScript 建筑师"，办公室":家庭"，薪金":"500000.00"}，{推销员":哈里斯" 2，" Title:"正在咨询JavaScript 建筑师"，办公室":家庭"，薪金":"500000.00"}，{推销员":哈里斯" 3，" Title:"正在咨询JavaScript 建筑师"，办公室":家庭"，薪金":"500000.00"}，{推销员":哈里斯" 4，" Title:"正在咨询JavaScript 建筑师"，办公室":家庭"，薪金":"500000.00"}，{推销员":哈里斯" 5，"标题:"咨询JavaScript 建筑师"，办公室":家庭"，薪金":"500000.00"}，{推销员":哈里斯" 6，" Title:"咨询JavaScript 建筑师"，办公室":家庭"，薪水":"500000.00"}]

[{"Salesman":"Harris 1","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},{"Salesman":"Harris 2","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},{"Salesman":"Harris 3","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},{"Salesman":"Harris 4","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},{"Salesman":"Harris 5","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},{"Salesman":"Harris 6","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"}]

现在，当您将此结果嵌入到javascript变量中时:

Now as you embed this result inside javascript variable:

var information = <?php echo json_encode($data) ?>;

在客户端浏览器中，它将像这样生成:

In client browser it will generated like this:

var information = [{"Salesman":"Harris 1","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},{"Salesman":"Harris 2","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},{"Salesman":"Harris 3","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},{"Salesman":"Harris 4","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},{"Salesman":"Harris 5","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},{"Salesman":"Harris 6","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"}]

上面的结果是您的javascript数据源.我们将其与数据表数据选项一起使用. Datatables JavaScript Sourced Data 中的一些示例.可以是数组或对象.

Above result is your javascript datasource. We use it with Datatables Data option. Some example in Datatables Javascript Sourced Data. It can be this can be arrays or objects.

当您的PHP数组获得特定的键索引名称时，它将转换为JSON对象中的相同键.因此，在数据表中，此对象键需要包含在 columns.data 选项内.您也可以使用数据表 colums.title 来设置列名.

When your PHP array got specific key index name, it will converted to same key in JSON object. So in Datatables this object key need to included inside columns.data option. You can use Datatables colums.title to set column name too.

$(document).ready(function () {
    $('#my-table').dataTable({
        data: information,
        columns: [
            { data: 'Salesman', title: 'Salesman' },
            { data: 'Office', title: 'Office' },
            { data: 'Title', title: 'Title' },
            { data: 'Salary', title: 'Salary' }
        ]
    });
});

查看并运行下面的演示代码段:

var information = [
{"Salesman":"Harris Teeter","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},
{"Salesman":"Adam Smith","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},
{"Salesman":"Mirole","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},
{"Salesman":"Jave Mocha","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},
{"Salesman":"Airis","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},
{"Salesman":"Steve Mat","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},
];

$(document).ready(function () {
    $('#my-table').dataTable({
        data: information,
        columns: [
            { data: 'Salesman', title: 'Salesman' },
            { data: 'Office', title: 'Office' },
            { data: 'Title', title: 'Title' },
            { data: 'Salary', title: 'Salary' }
        ]
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="my-table" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Salesman</th>
                <th>Title</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Salesman</th>
                <th>Title</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

这篇关于使用PHP数组作为DataTables的数据源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！