checkbox doesn't show after processing on server-side

silvi2727

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: Hello i'm a new user for dataTable. I used the sample from the web and changed a few of the configruation to adjust to my server_processing.php(things i changed, sql information, and $columns, and $table) at first it showed data from my mysql just fine but then i tried to add checkbox[since i need to get the id to get the additional information from another column]

what do i need to change?

below is the js:

    <script>
     $(document).ready(function () {
            $('#example').DataTable({
                processing: true,
                serverSide: true,
                scrollY: '300px',
                scrollX: true,
                    select: true,
                scrollCollapse: true,
                stateSave: true,
                paging: false,
                ajax: 'server_processing.php',
                columnDefs: [
                    {
                    orderable: false,
                    className: 'select-checkbox',
                    targets:   0
                    },
                ],
                select: {
                style:    'os',
                selector: 'td:first-child'
                },
                order: [[1, 'asc']]
            });            
        });
    </script>

below is my table html:

                <table id="example" class="display table table-striped row-border" style="width:100%">
                    <thead>
                        <tr>
                            <th>Checklist</th>
                            <th>Name</th>
                            <th>NRP</th>
                            <th>Email</th>
                        </tr>
                    </thead>
                </table>

and my server_processing.php is this:

<?php

// DB table to use
$table = 'mhs';

// Table's primary key
$primaryKey = 'id';

$columns = array(
    array( 'db' => 'nama', 'dt' => 1 ),
    array( 'db' => 'nrp',  'dt' => 2 ),
    array( 'db' => 'email',   'dt' => 3 )
);

// SQL server connection information
$sql_details = array(
    'user' => '',
    'pass' => '',
    'db'   => '',
'host' => ''
);

require('ssp.class.php');

echo json_encode(
    SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);
?>

i know i'm in the wrong for this since i echo $column and it doesn't have data for the checklist so it showed error (DataTables warning: table id=example - Requested unknown parameter '0' for row 0, column 0.)

what i wanted was to show checkbox on 1st column:

silvi2727

UPDATE===

i found the solution --

silvi2727

so i used the function (from this website) to a button and change it for a input type, and it shows the input type and it hides the id as well

For someone who need this, here's the code i did:

HTML

Checklist	Name	NRP	Email

JAVASCRIPT

<script type="text/javascript" language="javascript" class="init">  
    $(document).ready(function () {
    var table = $('#example').DataTable({
        processing: true,
            serverSide: true,
            scrollY: '300px',
            scrollX: true,
            select: true,
            scrollCollapse: true,
            stateSave: true,
            paging: false,
            ajax: 'server_processing.php',
            columnDefs: [
                {
                    targets: 0,
                    data: null,
                    defaultContent: '<input type="checkbox"></input>',
                },
            ],
            order: [[1, 'asc']]
    });

    $('#example tbody').on('click', 'input', function () {
        var data = table.row($(this).parents('tr')).data();
        alert(data[0] + "'s salary is: ");
    });
});
   </script>

PHP

<?php


// DB table to use
$table = 'yourdbname';

// Table's primary key
$primaryKey = 'id';

// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier. In this case simple
// indexes
$columns = array(
    array('db' =>'id', 'dt' => 0),
    array( 'db' => 'yourdbcolumn', 'dt' => 1 ),
    array( 'db' => 'yourdbcolumn',  'dt' => 2 )
);

// SQL server connection information
$sql_details = array(
    'user' => 'root',
    'pass' => 'admin',
    'db'   => 'yourdb',
    'host' => 'localhost'
);
require('ssp.class.php');

echo json_encode(
    SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);

**Note: I didn't edit any of the other such as ssp.class.php you can get the whole package from this site ^^
you just need the $columns change it into your desired and $table as your table. Fill $sql_details with your sql details

silvi2727

UPDATE FOR THE ANSWERS

Here's my HTML

<table id="example" class="display ui celled table hover row-border" style="width:100%">
   <thead>
     <tr>
       <th>Checklist</th>
       <th>Name</th>
        <th>NRP</th>
        <th>Email</th>
    </tr>
   </thead>
</table>

JAVASCRIPT

    <script type="text/javascript" language="javascript" class="init">  
            $(document).ready(function (){
                var table = $('#example').DataTable({
                    processing: true,
                    serverSide: true,
                    scrollY: '300px',
                    scrollX: true,
                    select: true,
                    scrollCollapse: true,
                    stateSave: true,
                    paging: false,
                    ajax: 'server_processing.php',
                    columnDefs: [{
                        targets: 0,
                        data: null,
                        defaultContent: '<input type="checkbox"></input>',
                    },],
                    order: [[1, 'asc']]
                });

                $('#example tbody').on('click', 'input', function () {
                var data = table.row($(this).parents('tr')).data();
                alert(data[0] + "'s salary is: ");
                });
            });
        </script>

PHP (server_processing.php)

<?php


$table = 'yourdb';

// Table's primary key
$primaryKey = 'id';

// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier. In this case simple
// indexes
$columns = array(
    array('db' =>'id', 'dt' => 0),
    array( 'db' => 'yourdbcolumn', 'dt' => 1 ),
    array( 'db' => 'yourdbcolumn',  'dt' => 2 )
);

// SQL server connection information
$sql_details = array(
    'user' => 'root',
    'pass' => 'admin',
    'db'   => 'yourdb',
    'host' => 'localhost'
);

require('ssp.class.php');

echo json_encode(
    SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);

I Didn't change anything from the other file, and what i added to JS (some might not be used since they are just css, are these)

    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" language="javascript" src="jquery.dataTables.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.css"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.12.1/css/dataTables.semanticui.min.css"></script>
    <script type="text/javascript" language="javascript" src="shCore.js"></script>
    <script type="text/javascript" language="javascript" src="demo.js"></script>
    <link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/css/dataTables.checkboxes.css" rel="stylesheet" />
<script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>

Some might need these, so i posted the solution
please take a bit of consideration for me if you view this as a solution since i just discovered this today, so it's not perfect ^^