Question

我正在使用Javascript动态生成html表，并将Wordpress-page html块替换为生成的表。如何在页面显示中引入分页，以便一次显示10条记录。

在Wordpress页面编辑器中添加了

html块

<table>
<!-- here goes our data! -->
</table>

Java脚本代码

var employeelList = [];
.......
employeesList.push({name: emp.name, age: emp.age, salary: emp.salary});
......


let table = document.querySelector("table");
let data = Object.keys(employeeList[0]);
generateTableHead(table, data);
generateTable(table, employeeList);


function generateTableHead(table, data) {
let thead = table.createTHead();
let row = thead.insertRow();
  for (let key of data) {
   let th = document.createElement("th");
   let text = document.createTextNode(key);
   th.appendChild(text);
   row.appendChild(th);
  }
}


function generateTable(table, data) {
 for (let element of data) {
  let row = table.insertRow();
    for (key in element) {
      let cell = row.insertCell();
      let text = document.createTextNode(element[key]);
      cell.appendChild(text);
    }
  }
}

Answer 1

在需要分页的地方添加脚本。

$ customPagHTML =“”;

$ query =“ SELECT * FROM custom_table”;

$ total_query =“从（$ {query}）AS Combined_table中选择COUNT（1）个；”;

$ total = $ wpdb-> get_var（$ total_query）;

$ items_per_page = 4;

$ page = isset（$ _GET ['cpage']）吗？ abs（（int）$ _GET ['cpage']）：1;

$ offset =（$ page * $ items_per_page）-$ items_per_page;

$ result = $ wpdb-> get_results（$ query。“ ORDER BY字段DESC LIMIT $ {offset}，

$ {items_per_page}“）;

$ totalPage = ceil（$ total / $ items_per_page）;

要进行分页，只需使用以下代码。

if（$ totalPage> 1）{

$ customPagHTML ='页面'。$ page。'的'。$ totalPage。''。paginate_links（array（ 'base'=> add_query_arg（'cpage'，'％＃％'），

'format'=>''，

'prev_text'=> __（'«'），

'next_text'=> __（'»'），

'total'=> $ totalPage，

'current'=> $ page

））。'';

}

Answer 2

按照说明使用datable库并应用：

https://datatables.net/

WordPress的页面如何分页插入表

2 个答案: