如何将行作为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

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

您所要求的最佳方法： 使用DataTables服务器端工具 。

它需要包括一些其他组件，但会将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片段

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纯AJAX方法

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" }
    ]
}