javascript - 纯粹使用 javascript 或 jquery 对动态生成的 html 进行分页

Question

我有一个动态生成行的 html 表。我想基于 css 和 javascript/jquery 实现对这个表的分页。

下面是表格的代码：

< script >
 var loop_var = 0;

function select_taf() {
 if (loop_var == 0) {
  loop_var = 1;
  $("table.order-list tbody").empty();
  var name1 = "<%= Request.Cookies["emailid"].Value.ToString() %>";
  var dtt = document.getElementById("year_date").value;
  var tafid;
  if (document.getElementById("open_taf").value == "") {
   $("table.order-list1 tbody").empty();
   $("table.order-list tbody").empty();
   tafid = 0;
   var myObj;
   var request = new XMLHttpRequest();
   request.overrideMimeType("application/json");
   request.open("GET", '<%=ConfigurationManager.AppSettings["serverip1"].ToString() %>' + name1 + "/" + tafid + "/" + dtt);
   request.send();
   request.onload = function() {
    var superHero = request.response;
    myObj = JSON.parse(superHero);
    myObj = JSON.parse(myObj);
    for (i in myObj.open_list) {
     check3(i, myObj.open_list[i].taf_no, myObj.open_list[i].purpose, myObj.open_list[i].loc_of_vst, myObj.open_list[i].no_of_days, myObj.open_list[i].adv_amt, myObj.open_list[i].remarks, myObj.open_list[i].tid, name1, dtt);
    }
    for (i in myObj.await_app) {
     check4(i, myObj.await_app[i].tid, myObj.await_app[i].purpose, myObj.await_app[i].loc_of_vst, myObj.await_app[i].no_of_days, myObj.await_app[i].adv_amt, myObj.await_app[i].remarks, "Await Manager Approval", myObj.await_app[i].yot);
    }
    for (i in myObj.manager_2_await) {
     check4(i, myObj.manager_2_await[i].tid, myObj.manager_2_await[i].purpose, myObj.manager_2_await[i].loc_of_vst, myObj.manager_2_await[i].no_of_days, myObj.manager_2_await[i].adv_amt, myObj.manager_2_await[i].remarks, "Await Manager 2 Approval", myObj.manager_2_await[i].yot);
    }
    for (i in myObj.manager_1_reject) {
     check4(i, myObj.manager_1_reject[i].tid, myObj.manager_1_reject[i].purpose, myObj.manager_1_reject[i].loc_of_vst, myObj.manager_1_reject[i].no_of_days, myObj.manager_1_reject[i].adv_amt, myObj.manager_1_reject[i].remarks, "Manager 1 Reject", myObj.manager_1_reject[i].yot);
    }
    for (i in myObj.manager_2_reject) {
     check4(i, myObj.manager_2_reject[i].tid, myObj.manager_2_reject[i].purpose, myObj.manager_2_reject[i].loc_of_vst, myObj.manager_2_reject[i].no_of_days, myObj.manager_2_reject[i].adv_amt, myObj.manager_2_reject[i].remarks, 'Manager 2 Reject', myObj.manager_2_reject[i].yot);
    }
    for (i in myObj.Auto_app_mrg_1) {
     check4(i, myObj.Auto_app_mrg_1[i].tid, myObj.Auto_app_mrg_1[i].purpose, myObj.Auto_app_mrg_1[i].loc_of_vst, myObj.Auto_app_mrg_1[i].no_of_days, myObj.Auto_app_mrg_1[i].adv_amt, myObj.Auto_app_mrg_1[i].remarks, 'Auto-Approved by manager 1', myObj.Auto_app_mrg_1[i].yot);
    }
    loop_var = 0;
   }
  } else {
   $("table.order-list tbody").empty();
   $("table.order-list1 tbody").empty();
   tafid = document.getElementById("open_taf").value;
   var myObj;
   var request = new XMLHttpRequest();
   request.overrideMimeType("application/json");
   request.open("GET", '<%=ConfigurationManager.AppSettings["serverip1"].ToString() %>' + name1 + "/" + tafid + "/" + dtt);
   request.send();
   request.onload = function() {
    var superHero = request.response;
    myObj = JSON.parse(superHero);
    myObj = JSON.parse(myObj);
    //var counter = myObj.count;
    //alert(counter);
    for (i in myObj.open_list) {
     check3(i, myObj.open_list[i].taf_no, myObj.open_list[i].purpose, myObj.open_list[i].loc_of_vst, myObj.open_list[i].no_of_days, myObj.open_list[i].adv_amt, myObj.open_list[i].remarks, myObj.open_list[i].tid, name1, dtt);
    }
    for (i in myObj.await_app) {
     check4(i, myObj.await_app[i].tid, myObj.await_app[i].purpose, myObj.await_app[i].loc_of_vst, myObj.await_app[i].no_of_days, myObj.await_app[i].adv_amt, myObj.await_app[i].remarks, "Await Manager Approval", myObj.await_app[i].yot);
    }
    for (i in myObj.manager_2_await) {
     check4(i, myObj.manager_2_await[i].tid, myObj.manager_2_await[i].purpose, myObj.manager_2_await[i].loc_of_vst, myObj.manager_2_await[i].no_of_days, myObj.manager_2_await[i].adv_amt, myObj.manager_2_await[i].remarks, "Await Manager 2 Approval", myObj.manager_2_await[i].yot);
    }
    for (i in myObj.manager_1_reject) {
     check4(i, myObj.manager_1_reject[i].tid, myObj.manager_1_reject[i].purpose, myObj.manager_1_reject[i].loc_of_vst, myObj.manager_1_reject[i].no_of_days, myObj.manager_1_reject[i].adv_amt, myObj.manager_1_reject[i].remarks, "Manager 1 Reject", myObj.manager_1_reject[i].yot);
    }
    for (i in myObj.manager_2_reject) {
     check4(i, myObj.manager_2_reject[i].tid, myObj.manager_2_reject[i].purpose, myObj.manager_2_reject[i].loc_of_vst, myObj.manager_2_reject[i].no_of_days, myObj.manager_2_reject[i].adv_amt, myObj.manager_2_reject[i].remarks, 'Manager 2 Reject', myObj.manager_2_reject[i].yot);
    }
    for (i in myObj.Auto_app_mrg_1) {
     check4(i, myObj.Auto_app_mrg_1[i].tid, myObj.Auto_app_mrg_1[i].purpose, myObj.Auto_app_mrg_1[i].loc_of_vst, myObj.Auto_app_mrg_1[i].no_of_days, myObj.Auto_app_mrg_1[i].adv_amt, myObj.Auto_app_mrg_1[i].remarks, 'Auto-Approved by manager 1', myObj.Auto_app_mrg_1[i].yot);
    }
    loop_var = 0;
   }
  }
 }
}

function check4(counter, data, data1, data2, data3, data4, data5, data6, data7) {
 var newRow = $("<tr>");
 var cols = "";
 cols += '<td name="name' + counter + '">' + data + '</td>';
 cols += '<td name="from_loc' + counter + '">' + data1 + '</td>';
 cols += '<td name="to_loc' + counter + '">' + data2 + '</td>';
 cols += '<td name="date_of_travel' + counter + '">' + data3 + '</td>';
 cols += '<td name="status' + counter + '">' + data4 + '</td>';
 cols += '<td name="status' + counter + '">' + data5 + '</td>';
 if (data6 === "Await Manager Approval") {
  cols += '<td name="status' + counter + '"> Approval Pending </td>';
  cols += '<td name="status' + counter + '"> Approval Pending </td>';
  cols += '<td><button type="button" class="btn btn-primary btn-sm btn-block" id="' + data + "_" + data7 + '" onclick="shw_taf(this.id)">Detail</button></td>';
  cols += '<td><button type="button" class="btn btn-danger btn-sm btn-block" id="' + data + "_" + data7 + '" onclick="edt_taf(this.id)">Delete</button></td>';
 } else if (data6 === "Auto-Approved by manager 1") {
  cols += '<td name="status' + counter + '">Auto-Approved </td>';
  cols += '<td name="status' + counter + '"> Approval Pending </td>';
  cols += '<td><button type="button" class="btn btn-primary btn-sm btn-block" id="' + data + "_" + data7 + '" onclick="shw_taf(this.id)">Detail</button></td>';
  cols += '<td><button type="button" class="btn btn-danger btn-sm btn-block" id="' + data + "_" + data7 + '" onclick="edt_taf(this.id)">Delete</button></td>';
 } else if (data6 === "Await Manager 2 Approval") {
  cols += '<td name="status' + counter + '"> Approved </td>';
  cols += '<td name="status' + counter + '"> Approval Pending </td>';
  cols += '<td><button type="button" class="btn btn-primary btn-sm btn-block" id="' + data + "_" + data7 + '" onclick="shw_taf(this.id)">Detail</button></td>';
  cols += '<td><button type="button" class="btn btn-danger btn-sm btn-block" id="' + data + "_" + data7 + '" onclick="edt_taf(this.id)">Delete</button></td>';
 } else if (data6 === "Manager 1 Reject") {
  cols += '<td name="status' + counter + '"> Request Denied </td>';
  cols += '<td name="status' + counter + '"> Not Required </td>';
  cols += '<td><button type="button" class="btn btn-primary btn-sm btn-block" id="' + data + "_" + data7 + '" onclick="shw_taf(this.id)">Detail</button></td>';
  cols += '<td><button type="button" class="btn btn-danger btn-sm btn-block" id="' + data + "_" + data7 + '" onclick="edt_taf(this.id)">Delete</button></td>';
 } else if (data6 === "Manager 2 Reject") {
  cols += '<td name="status' + counter + '"> Approved </td>';
  cols += '<td name="status' + counter + '"> Request Denied </td>';
  cols += '<td><button type="button" class="btn btn-primary btn-sm btn-block" id="' + data + "_" + data7 + '" onclick="shw_taf(this.id)">Detail</button></td>';
  cols += '<td><button type="button" class="btn btn-danger btn-sm btn-block" id="' + data + "_" + data7 + '" onclick="edt_taf(this.id)">Delete</button></td>';
 }
 newRow.append(cols);
 $("table.order-list1").append(newRow);
} <
/script>

我已经尝试过不适用于我的项目的数据表以及 StackOverflow 上给出的其他几种方法。

请对此进行指导

标签： javascriptjqueryhtmlhtml-table