如何将行作为 html 添加到 BootStrap 插件数据表？

Question

有没有办法将行作为 html 添加到数据表中？我知道建议的做法是这样的：

$('#addRow').on( 'click', function () {
        t.row.add( [
            counter +'.1',
            counter +'.2',
            counter +'.3',
            counter +'.4',
            counter +'.5'
        ] ).draw( false );

        counter++;
    } );

但是我有一个复杂的 JSON 输入，我想在 PHP 中对其进行预处理。是否可行甚至可能？

编辑：

所以不要做上面的代码：

 t.row.add(resultfromphpserverwithalltherows);

更新：

JSON 输出

{"student":[{"id":"2008-161","name":"Joseph Taylor","age":"20","status":"married","address":"USA","subjects":[{"math":"90","science":96,"history":99,"literature":93,"pe":"96"}],"remarks":"passed"}

有时：

{"student":[{"id":"2008-161","name":"Joseph Taylor","age":"20","status":"married","address":"USA","subjects":[{"math":"90","science":96,"history":99,"literature":93,"pe":"96"}],"remarks":"passed","othersubjects":[{"applied math":"90","general science":96,"world history":99,"literature":93,"pe":"96"}],"remarks":"passed"}

所以我无法真正定义列，因为 JSON 输出是动态的，这就是为什么我想先在 PHP 中对其进行预处理。

Answer 1

无论您如何处理，都需要一些重要的数据格式。

满足您的要求的最佳方法：use DataTables server-side tools。

它需要包含一些额外的组件，但会将 javascript 简化为：

$('#example').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": "../server_side/scripts/server_processing.php"
} );

...稍作调整，您可以进一步简化：

$(function(){
    var dt = new dataTableAuto();
    dt.load();
});

function dataTableAuto() {
    this.params = {
        "processing": true,
        "serverSide": true,
        "ajax": "../server_side/scripts/server_processing.php"
    };

    this.load = function() {
        $('#example').DataTable( this.params );
    }
}

php ajax 服务器将原始 JSON 作为单行发送

只需向包含计数器的 php 发送一个 ajax 请求，然后使用与您要构建的内容匹配的 json 数组进行响应。

Javascript sn-p

counter = 0;

$.ajax({
    url: '[your url]',
    type: 'post',
    data: {"counter":counter},
    contentType: "application/json",
    dataType: 'json',
    success: function(response){
        t.row.add(JSON.parse(response)).draw( false );
        counter++;
    },
});

php 片段

$jsonString = file_get_contents('php://input');
$data = json_decode($jsonString);
$counter = $data['counter'];
$totalRows = 10;

for( $i = 0; $i < $totalRows; $i++) {
    $result[] = $counter .".". $i;
}

header('Content-Type: application/json', true, 200);
echo json_encode($result);
exit;

DataTables pure AJAX approach

javascript

$(function(){
    t = $('#example');

    $.ajax({
        url: '[your url]',
        type: 'post',
        data: {"classID":12},
        contentType: "application/json",
        dataType: 'json',
        success: function(response){
            t.DataTable( JSON.parse(response) );
        },
    });
});

php

$jsonString = file_get_contents('php://input');
$data = json_decode($jsonString);
$classID = intval($data['classID']);

$cols = array('Name', 'Position', 'Score');
foreach ( $cols as $colName ) {
    $entry = new stdClass();
    $entry->title = $colName;
    $result['columns'][] = $entry;
}

$result = // some query [ex: get rows by class id]

foreach( $result as $row) {
    $thisRow = array();
    foreach ( $cols as $colName ) {
        $thisRow[] = $row['$colName']
    }
    $result['data'][] = $thisRow;
}

header('Content-Type: application/json', true, 200);
echo json_encode($result);
exit;

这应该会产生一个类似的对象：

{
    data: [
        ['Joseph Taylor', '22', '90']
    ],
    columns: [
        { title: "Name" },
        { title: "Position" },
        { title: "Score" }
    ]
}