konglong1
152 天前
<?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
}
?>