我有一个带有数据表的 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 )
);
最佳答案
解决了!
将我的 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>
关于javascript - php - 使用数据表(服务器端)的数据填充 bootstrap-4 模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60249834/