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.
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");
});