Add button to each row in Server-Side-Datatable

gadibh53 · February 2020

I have a PHP program with a datatable, which works fine. Each row has a button (“Manage”) for CRUD actions which, when clicked, opens up a Bootstrap 4 modal :

I changed the program to Datatables-Server-Side because the DB table has thousands of rows. This too works fine, but I cannot add the “Mange” button to the datatable rows.

My HTML :

<html>
<head>
    <title>TEST (DataTables)</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">    
</head>
<body>
    <div class="container-fluid">
        <div class="jumbotron jumbotron-fluid mr-n2 ml-n2 mb-n2 rounded bg-secondary">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-lg-offset-2 myMargTop20 bg-white rounded">
                        <table id="example" class="display table table-bordered table-hover dt-responsive nowrap rounded bg-info" cellspacing="0" width="100%">
                            <br>
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Full Name</th>
                                    <th>User</th>
                                    <th>Phone</th>
                                    <th>Create Date</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#example').dataTable({
                'scrollX': true,
                'pagingType': 'numbers',
                'processing': true,
                'serverSide': true,
                'ajax': 'datatablesServerSide.php'
            });
        });
    </script>
</body>
</html>

My datatablesServerSide.php :

<?php
$table = "users";
$primaryKey = "usrId";
$columns = array(
  array("db" => "usrId", "dt" => 0),
  array("db" => "usrFullName", "dt" => 1),
  array("db" => "usrName", "dt" => 2),
  array("db" => "usrPhone", "dt" => 3),
  array("db" => "usrCreateDate","dt" => 4, "formatter" => function($d, $row) {return date("d-m-Y", strtotime($d));})
);
$sql_details = array(
  "user" => "root",
  "pass" => "",
  "db"   => "a_my_project",
  "host" => "localhost"
);
require( "ssp_with_UTF8.class.php" );
echo json_encode(
  SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);

I would appreciate any hint to start me going. I read numerous entries here and elsewhere but none helped...
Thank you!

kthorngren · February 2020

These examples show you to add Buttons using Datatables:

Uses columns.defaultContent:
http://live.datatables.net/xijecupo/1/edit

Uses columns.render:
http://live.datatables.net/qemodapi/1/edit

Kevin

gadibh53 · February 2020

@kthorngren - Thank you, but I don't think this applies to Server-Side datatables, though I might be wrong.

My Ajax is calling "datatablesServerSide.php" and I couldn't find a way to add the button to the $columns variable in this file.
It is probably a syntax error...
Here is one of the dozens of ways I tried :

$columns = array(
  array("defaultContent: <button id='myBtn' type='button' class='btn'>Manage</button>", "dt" => 0),
  array("db" => "usrId", "dt" => 1),
  array("db" => "usrFullName", "dt" => 2),
  array("db" => "usrName", "dt" => 3),
  array("db" => "usrPhone", "dt" => 4),
  array("db" => "usrCreateDate","dt" => 5, "formatter" => function($d, $row) {return date("d-m-Y", strtotime($d));})
);

And, of course I added a <th> to my HTML :

<tr>
   <th>Manage</th>  <!-- this line added -->
   <th>Id</th>
   <th>Full Name</th>
   <th>User</th>
   <th>Phone</th>
   <th>Create Date</th>
</tr>

It still complains that Undefined index: db in the SSP.
Can you help me here...? Thanks again.

kthorngren · February 2020

I don't use PHP so won't be much help there.

I would still let Datatables create the buttons. Looks like you are using arrays so you can use columns.data to define the columns for the array and also have a column for Manage. Updated my columns.defaultContent to show this with server side processing:
http://live.datatables.net/dokejiji/1/edit

Notice also that I changed the events to access the data using array notation instead of object notation.

Kevin

gadibh53 · February 2020

Thank you so much for your help!
Since I need the PHP part, I'll continue searching.

gadibh53 · February 2020

SOLVED!
With your help I got got it done.
For people who might need it in the future, here is my code :

<html>
<head>
    <title>TEST (DataTables)</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">    
</head>
<body>
    <div class="container-fluid">
        <div class="jumbotron jumbotron-fluid mr-n2 ml-n2 mb-n2 rounded bg-secondary">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-lg-offset-2 myMargTop20 bg-white rounded">
                        <table id="example" class="display table table-bordered table-hover dt-responsive nowrap rounded" cellspacing="0" width="100%">
                            <br>
                            <thead>
                                <tr>
                                    <th>Manage</th>
                                    <th>Id</th>
                                    <th>Full Name</th>
                                    <th>User</th>
                                    <th>Phone</th>
                                    <th>Create Date</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#example').dataTable({
                'scrollX': true,
                'pagingType': 'numbers',
                'processing': true,
                'serverSide': true,
                'ajax': 'datatablesServerSide.php',
                "columnDefs": [{"render": createManageBtn, "data": null, "targets": [0]}],
            });
        });
    </script>
    <script type="text/javascript">
        function createManageBtn() {
            return '<button id="manageBtn" type="button" onclick="myFunc()" class="btn btn-success btn-xs">Manage</button>';
        }
        function myFunc() {
            console.log("Button was clicked!!!");
        }
    </script>
</body>
</html>

datatablesServerSide.php :

<?php
$table = "users";
$primaryKey = "usrId";
$columns = array(
  array("db" => "usrId", "dt" => 1),
  array("db" => "usrFullName", "dt" => 2),
  array("db" => "usrName", "dt" => 3),
  array("db" => "usrPhone", "dt" => 4),
  array("db" => "usrCreateDate","dt" => 5, "formatter" => function($d, $row) {return date("d-m-Y", strtotime($d));})
);
$sql_details = array(
  "user" => "root",
  "pass" => "",
  "db"   => "a_my_project",
  "host" => "localhost"
);
require( "ssp_with_UTF8.class.php" );
echo json_encode(
  SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);

The result :

wnp32d · October 2020

When you click on the button how to do you return the value of a row or column. Preferably an ID.

colin · October 2020

@wnp32d This example should help - it's updating the 4th column when clicked upon - you could use that as a template on how to get the data.

If not, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Add button to each row in Server-Side-Datatable

Add button to each row in Server-Side-Datatable

Answers

Howdy, Stranger!

Categories

DataTables

Add button to each row in Server-Side-Datatable

Add button to each row in Server-Side-Datatable

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables