php - populate bootstrap-4 modal with data from Datatables(server side)

I have a PHP program with a datatable (Server Side !!):

enter image description here

Each row has a button (“Manage”) which, when clicked, opens up a Bootstrap 4 modal:

enter image description here

I need to populate the modal's 2 elements with the data in the row containing the button which was clicked.

Any hint would be greatly appreciated.

HTML :

<body>
<div id="manageModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="manageAccountModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content border border-dark">
            <form id="manageModalForm" name="manageModalForm" action="" method="POST" role="form" class="p-2 needs-validation" novalidate>
                <div class="modal-body">
                    <div>
                        Id<a id="accUserId" name="accUserId" class="form-control"></a>
                        <br>
                    </div>
                    <div class="form-group">
                        User Name<input id="accUserName" name="accUserName" type="text" class="form-control">
                    </div>
                </div>
                <div id="manageModalActions" class="modal-footer myLightPurpleBgColor rounded">
                    <div class="col-8">
                        <div class="row">
                            <div class="col-4">
                                <button type="button" class="btn btn-secondary text-light border border-dark myBigBtn font-weight-bold" data-dismiss="modal"><h7>Cancel</h7></button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<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>User Name</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

Javascript :

<script>
    $(document).ready(function() {
        $('#example').dataTable({
            'scrollX': true,
            'pagingType': 'numbers',
            'processing': true,
            'serverSide': true,
            'ajax': 'datatablesServerSide.php',
            "columnDefs": [{"render": createManageButtonFunc, "data": null, "targets": [0]}],
        });
    });
    function createManageButtonFunc() {
        return '<button id="manageBtn" type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#manageModal">Manage</button>';
    }
</script>

datatablesServerSide.php :

<?php
$table = "users";
$primaryKey = "usrId";
$columns = array(
  array("db" => "usrId", "dt" => 1),
  array("db" => "usrName", "dt" => 2)
);
$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 )
);

1 answer

  • answered 2020-02-16 18:59 gadi

    SOLVED !
    Change my Javascript to the following and it works :

        <script>
        $(document).ready(function() {
            // ==============  ==============
            var jsTable = $('#example').dataTable({ // added:   var jsTable =
            // $('#example').dataTable({
                'scrollX': true,
                'pagingType': 'numbers',
                'processing': true,
                'serverSide': true,
                'ajax': 'datatablesServerSide.php',
                "columnDefs": [{"render": createManageButtonFunc, "data": null, "targets": [0]}],
            });
            // ============== Next 7 lines were added ==============
            $('#example').on('click', 'tr', function(){
                // var jsData = jsTable.fnGetData(this);  <== fnGetData deprecated!!!
                jsTable = $('#example').DataTable();
                var jsData = jsTable.row(this).data();
                $('#accUserId').text(jsData[1]);
                $('#accUserName').val(jsData[2]);
            })
            // =====================================================
        });
        function createManageButtonFunc() {
            return '<button id="manageBtn" type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#manageModal">Manage</button>';
        }
    </script>