简体   繁体   中英

add checkbox to datatable while loading data from database using ajax

I can't add checkbox to my DataTable while bind data from db using ajax. How can I add a checkbox with server-side data loading?

My 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);
?>

I need to add a checkbox on the first column of each td with id

You may employ columns.render option for that purpose:

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

Please find this answer. You can populate checkbox from the server-side itself

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

In the HTML you need to add

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

Changes in 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);
?>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM