phpjqueryhtmldatatable

Passing costum parameter to server side data of datatable.?


I have kind of application which will have big amount of data, so I have chosen server side datatable for that purpose. But I want to add edit and delete button on rows that comes with data but I could not find any example which have tried to use buttons on rows it just fetching data which is on column.

Here is my server side script

/*
 * DataTables example server-side processing script.
 *
 * Please note that this script is intentionally extremely simply to show how
 * server-side processing can be implemented, and probably shouldn't be used as
 * the basis for a large complex system. It is suitable for simple use cases as
 * for learning.
 *
 * See http://datatables.net/usage/server-side for full details on the server-
 * side processing requirements of DataTables.
 *
 * @license MIT - http://datatables.net/license_mit
 */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Easy set variables
 */
// DB table to use
$table = 'category';

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

// 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' => 'cid', 'dt' => 0 ),
    array( 'db' => 'cname',  'dt' => 1 ) 
    );


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


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * If you just want to use the basic configuration for DataTables with PHP
 * server-side, there is no need to edit below this line.
 */

require( 'ssp.class.php' );

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

Here is my html

    <table class="table table-striped- table-bordered table-hover table-checkable" id="m_table_1">
                                <thead>
                                    <tr>
                                        <th>
                                            cid
                                        </th>
                                        <th>
                                            cname
                                        </th>
                                    </tr>
                                </thead>
                            </table>

here is my jquery script

$(document).ready(function() {
$('#m_table_1').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": "data.php",
       dom: 'Bfrtip',
    buttons: [
     'copyHtml5',
       'excelHtml5',
      'csvHtml5',
       'pdfHtml5'
   ]
} );
 } );

Since in example of datatable there is way to show column name from db but how can I also let it know to add 2 more custom columns which will have this in their data?

Edit button:

<button value="'.$category['cid'].'" class="btn btn-primary get" id="get'.$category['cid'].'">edit </button>

delete button:

<button class="btn btn-danger" id="del'.$category['cid'].'" value="'.$category['cid'].'" type="button">Delete</button>

Here is my table i would like to have.

<table class="table table-striped- table-bordered table-hover table-checkable" id="m_table_1">
                                <thead>
                                    <tr>
                                        <th>
                                            cid
                                        </th>
                                        <th>
                                            cname
                                        </th>
                                        <th>
                                            edit
                                        </th>
                                        <th>
                                            delete
                                        </th>
                                    </tr>
                                </thead>
                            </table>

i want to have edit and delete column on each row which will have specific id with primary key id in the end. Since i am totally new with ajax i have created button to update and delete data through ajax but i can only display them with simple data table which i cannot reload after update or delete any row without page refresh. therefore i needed server side script but how seems there must be way to add custom column with buttons and have their id with primary key of column.


Solution

  • You can use "columnDef" option. Take a look this

    $(document).ready(function() {
      var table = $("#m_table_1").DataTable({
        processing: true,
        serverSide: true,
        ajax: "data.php",
        dom: "Bfrtip",
        buttons: ["copyHtml5", "excelHtml5", "csvHtml5", "pdfHtml5"],
        columnDefs: [
          {
            targets: 3, // edit column order
            data: null,
            defaultContent: "<button class='edit'>Edit!</button>"
          },
          {
            targets: 4, // delete column order
            data: null,
            defaultContent: "<button class='delete'>Delete!</button>"
          }
        ]
      });
    });
    
    $("#m_table_1").on("click", "button.edit", function() {
      var data = table.row($(this).parents("tr")).data();
      alert(data[0] + " I'm editing");
    });
    $("#m_table_1").on("click", "button.delete", function() {
      var data = table.row($(this).parents("tr")).data();
      alert(data[0] + " I'm Delete");
    });