data.php 文件
都在同一个路径下
<?php
// 获取分页相关的信息
// 获取总记录数
$pageSize = $_POST['pageSize']; // 假设总记录数为 10
$current = $_POST['current']; // 假设总记录数为 10
$res = [];
// for ( $i = 1; $i <= 20; $i ++ ) {
// $rowData = [
// 'columnName' => '数据' . $i,
// 'columnLabel' => '数据' . $i,
// 'columnUrl' => '数据' . $i,
// ];
//
// $res[] = $rowData;
// }
// 输出 JSON 数据
$response = create_signed_rest_request( '/api/cms/column/getAllColumn', [
'method' => 'POST',
'body' => [
'pageSize' => $pageSize,
'current' => $current,
],
] );
// 将查询结果转换为 JSON 格式
$data = [
'data' => $res,
'recordsFiltered' => 100,
];
echo json_encode( $data );
<?php
echo create_dynamic_table() ?>
<?php
// 在您的插件文件中,包含 DataTables 库的 CSS 和 JS 文件
// 创建包含动态加载数据和切换页码功能的表格
function create_dynamic_table(): void {
?>
<div class="column">
<table id="myTable">
<thead>
<tr>
<th>栏目名称</th>
<th>栏目标识</th>
<th>栏目路径</th>
</tr>
</thead>
<tbody>
<!-- 这里是动态加载的数据行 -->
</tbody>
</table>
</div>
<script>
jQuery(document).ready(function ($) {
var table = $('#myTable').DataTable({
lengthMenu: [10, 15, 20, 30],
pageLength: 20, // 设置每页条数
serverSide: true,
columns: [
{data: 'columnName'},
{data: 'columnLabel'},
{data: 'columnUrl'}
],
ajax: {
url: '<?php echo plugins_url( 'column/data.php', plugin_dir_path( __FILE__ ) );?>',
type: 'POST',
data: function (d) {
const pageSize = d.length
const current = d.start / pageSize + 1
d = {
pageSize,
current
}
return d
},
dataType: 'json'
},
});
});
</script>
<?php
}
?>