使用ajax从数据库加载数据时向数据表添加复选框

Question

在使用 ajax 绑定来自 db 的数据时，我无法将复选框添加到我的 DataTable。如何添加带有服务器端数据加载的复选框？

我的 jQuery：

var table = $('#example').DataTable({
        "ajax": "getBusperOrder.php",
        "bPaginate": true,
        "retrieve": true,
        "bProcessing": true,
        "pageLength": 10,
        "columns": [{
                mData: 'district'
            }, {
                mData: 'deponame'
            }, {
                mData: 'busname'
            }, {
                mData: 'bonnetnumber'
            }, {
                mData: 'routename'
            }, {
                mData: 'bustype'
            }, {
                mData: 'status'
            }
        ],
    });

HTML：

<table id="example">
    <thead>
        <tr>
            <th>District</th>
            <th>Depo Name</th>
            <th>Bus Number</th>
            <th>Bonnet Number</th>
            <th>Route Name</th>
            <th>Bus Type</th>
            <th>Action</th>
        </tr>
    </thead>
</table>

gerBusperOrder.php

<?php
require('database/db.php');
$sql = "select * from bus as B left join depo as D on B.depoid=D.depoid left join district as DS on D.district=DS.id left join bustype as BS on B.bustypeid=BS.bustypeid left join route as R on B.routeid=R.routeid LEFT JOIN bustype as BT on B.bustypeid=BT.bustypeid WHERE B.busid IN(SELECT busid from bus where busid NOT IN (SELECT DISTINCT(bus_id) from advt_book_side AS ABS INNER JOIN booking as B on ABS.booking_number=B.bookingnumber WHERE B.todate>CURDATE() GROUP BY bus_id HAVING COUNT(sides_id)=4))";
$resultset = mysqli_query($db, $sql) or die("database error:" . mysqli_error($db));
$data = array();
while ($rows = mysqli_fetch_assoc($resultset)) {
    $data[] = $rows;
}
$results = array(
    "sEcho" => 1,
    "iTotalRecords" => count($data),
    "iTotalDisplayRecords" => count($data),
    "aaData" => $data
);
echo json_encode($results);
?>

我需要在每个 td 的第一列添加一个带有 id 的复选框

Answer 1

您可以为此使用columns.render 选项：

"columns": [{
        mData: 'district'
        render: (_,__,rowData) => `<input type="checkbox" value="${rowData.busid}">${rowData.busid}</input>`
    },
    ...
]

Answer 2

请找到这个答案。您可以从服务器端本身填充复选框

var table = $('#example').DataTable({
        "processing": false,
        "serverSide": true,
        "order": [],
        "ajax": {
            "url": "getBusperOrder.php",
            "type": "POST"
        }

在你需要添加的HTML中

<table id="example">
<thead>
    <tr>
        <th></th>
        <th>District</th>
        <th>Depo Name</th>
        <th>Bus Number</th>
        <th>Bonnet Number</th>
        <th>Route Name</th>
        <th>Bus Type</th>
        <th>Action</th>
    </tr>
</thead>

PHP 的变化

<?php
require('database/db.php');
$sql = "select * from bus as B left join depo as D on B.depoid=D.depoid left join district as DS on D.district=DS.id left join bustype as BS on B.bustypeid=BS.bustypeid left join route as R on B.routeid=R.routeid LEFT JOIN bustype as BT on B.bustypeid=BT.bustypeid WHERE B.busid IN(SELECT busid from bus where busid NOT IN (SELECT DISTINCT(bus_id) from advt_book_side AS ABS INNER JOIN booking as B on ABS.booking_number=B.bookingnumber WHERE B.todate>CURDATE() GROUP BY bus_id HAVING COUNT(sides_id)=4))";
$resultset = mysqli_query($db, $sql) or die("database error:" . mysqli_error($db));
$data = array();
while ($rows = mysqli_fetch_assoc($resultset)) {
    $row = array();
    $row[] = '<div class="table-checkbox table-checkbox-data"><input type="checkbox" value="'. $rows['id'] .'"></div>';
   //insert other columns in $row array
    $data[] = $rows;
}
$output = array(
            "recordsTotal" => count($data),,
            "recordsFiltered" => count($data),,
            "data" => $data,
        );

    echo json_encode($output);
?>