Question

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

进行了验证。

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

<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>

Answer 1

示例在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格式：

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

会产生这个：

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

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

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

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

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数据源。我们将其与数据表Data option一起使用。 Datatables Javascript Sourced Data中的一些示例。可以是数组或对象。

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

$(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>

Answer 2

您尝试过吗：

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

使用console.log，您将看到数组是否被正确解析，并且使用JSON.parse将数组从PHP传递到JS是我的一种更好的做法经验，语法错误的风险较小。

将PHP数组用作数据表的数据源

2 个答案: