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

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

0 голосов
/ 18 октября 2019

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

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

Библиотеки: 

<link rel="stylesheet" href="smpSortableTable.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="smpSortableTable.js"></script>

Таблица имеет вид: 

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

Код Javascript: 

<script>
var name1 = "<%= Request.Cookies["emailid"].Value.ToString() %>";
            //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 = $("<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>';
    cols += '<td><a href="travel_detail_form.aspx?tid='+ data6 +'&name='+ data7 +'" class="btn btn-info" role="button">Details</a></td>';
    newRow.append(cols);
            $("table.order-list").append(newRow);

            $('#Open_table').smpSortableTable(check3,5); 
        }      
    </script>

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

1 Ответ

0 голосов
/ 18 октября 2019

После включения Datatable.js в ваш файл. Вам необходимо применить этот DataTable к вашей таблице в функции ready(). Попробуйте это .. $(document).ready( function () { $('#Open_table').DataTable(); } );

...