Как реализовать нумерацию страниц в динамической таблице HTML

Как реализовать разбиение на страницы в динамической таблице HTML

У меня есть HTML-таблица, которая динамически заполняется с помощью данных JSON. Я должен реализовать нумерацию страниц в этой таблице, чтобы показывать только 10 записей на странице.

Я пробовал Datatable.js и smpSortaableTable.js, который показывает опцию для предыдущей и следующей кнопки, но все записи отображаются только на первой странице.

Библиотеки:

 {amp}lt;link rel="stylesheet" href="smpSortableTable.css"{amp}gt; {amp}lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="smpSortableTable.js"{amp}gt;{amp}lt;/script{amp}gt; 

Конструкция стола:

 {amp}lt;div class="card-body"{amp}gt; {amp}lt;table class="table table-bordered table-hover order-list table-responsive-sm table-responsive-md table-striped" style="font-size:small;" id="Open_table"{amp}gt; {amp}lt;thead class="thead-dark"{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;TAF-No{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Purpose{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Travel Location{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;No of Days{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Advance{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Remarks{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody{amp}gt; {amp}lt;/tbody{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;/div{amp}gt; 

Javascript код:

 {amp}lt;script{amp}gt; var name1 = "{amp}lt;%= Request.Cookies["emailid"].Value.ToString() %{amp}gt;"; //alert(name1); var dtt = document.getElementById("year_date").value; //alert(dtt); var tafid; if (document.getElementById("open_taf").value == "") { tafid = 0; var myObj; var request = new XMLHttpRequest(); request.overrideMimeType("application/json"); request.open("GET", "API"); request.send(); request.onload = function () { var superHero = request.response; myObj = JSON.parse(superHero); myObj = JSON.parse(myObj); //var counter = myObj.count; 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); } } } else { tafid = document.getElementById("open_taf").value; var myObj; var request = new XMLHttpRequest(); request.overrideMimeType("application/json"); request.open("GET", "API"); 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); } } } } function check3(counter, data, data1, data2, data3, data4, data5, data6, data7, data8) { //alert('2'); var newRow = $("{amp}lt;tr{amp}gt;"); var cols = ""; cols  = '{amp}lt;td name="name'   counter   '"{amp}gt;'   data   '{amp}lt;/td{amp}gt;'; cols  = '{amp}lt;td name="from_loc'   counter   '"{amp}gt;'   data1   '{amp}lt;/td{amp}gt;'; cols  = '{amp}lt;td name="to_loc'   counter   '"{amp}gt;'   data2   '{amp}lt;/td{amp}gt;'; cols  = '{amp}lt;td name="date_of_travel'   counter   '"{amp}gt;'   data3   '{amp}lt;/td{amp}gt;'; cols  = '{amp}lt;td name="status'   counter   '"{amp}gt;'   data4   '{amp}lt;/td{amp}gt;'; cols  = '{amp}lt;td name="status'   counter   '"{amp}gt;'   data5   '{amp}lt;/td{amp}gt;'; cols  = '{amp}lt;td{amp}gt;{amp}lt;a href="travel_detail_form.aspx?tid='  data6  '{amp}amp;name='  data7  '" class="btn btn-info" role="button"{amp}gt;Details{amp}lt;/a{amp}gt;{amp}lt;/td{amp}gt;'; newRow.append(cols); $("table.order-list").append(newRow); $('#Open_table').smpSortableTable(check3,5); } {amp}lt;/script{amp}gt; 

Ожидаемый результат — номера страниц, а также предыдущая и следующая кнопки внизу. Пожалуйста, направляйте и заранее благодарю за помощь.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector