![](/img/trans.png)
[英]populate data on button click from the corresponding datatables row in a bootstrap modal
[英]php - populate bootstrap-4 modal with data from Datatables(server side)
我有一個帶有數據表的 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>
數據表ServerSide.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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.