php

Question

我有一个带有数据表的 PHP 程序（服务器端 !!）：

每一行都有一个按钮（“管理”），单击该按钮会打开 Bootstrap 4 模式：

我需要用包含被单击按钮的行中的数据填充模式的 2 个元素。

如有任何提示，我们将不胜感激。

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 )
);

Answer 1

已解决！
将我的 Javascript 更改为以下内容并且有效：

    <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>

php - 使用数据表中的数据填充 bootstrap-4 模态（服务器端）

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

javascript

server-side

datatables

bootstrap-modal