jquery、ajax 和 html 的分页问题

Question

拜托，我遇到了分页问题。这是我的 Ajax Jquery 来加载我的客户端视图。除了分页外，它工作得很好。如果我尝试直接在视图中添加，分页显示但从服务器自动加载值，它不会显示分页

function authors(){
            $('.loader').css('opacity', '1');
        var request  = $.ajax({
            url: mainurl,
            type: "POST",
            dataType: 'json',
            data:{"apikey":"emple_app@2016","id":"all"},
            async:true
        })

        request.done(function(myresult){
            var tableview="";
            for (var i=0;i < myresult.data.length; i++){
                var id = myresult.data[i].id; // to reference the id 
                var file_name = myresult.data[i].file_name;
                var file_title = myresult.data[i].file_title;
                var author = myresult.data[i].author;
                var paper = myresult.data[i].paper;
                var focus = myresult.data[i].focus;
                var year =myresult.data[i].year;
                var down= "mainurl/uploads/"+file_name;

    tableview += "<tbody>"+
                "<tr>"+
                  "<td>"+file_title+"</td>"+
                  "<td>"+author+"</td>"+
                  "<td>"+focus+"</td>"+
                  "<td>"+paper+"</td>"+
                  "<td>"+year+"</td>"+
                  "<td>"+ "<a href='" +down+"'>"+ "<i class='fa fa-cloud-download'></i>"+"</td>"+

                "</tr>"+
                   "</tbody>"


            }
            $('#tableData').append(tableview);

        request.always(function(){
            $('.loader').css('opacity', '0');
        })
    }

客户端视图

<div id="journalHolder">
 <div class="tabler" >
<input type="text" id="search" placeholder="  live search" />
<hr/>
<table id="tableData" class="table table-bordered table-striped">
          <thead>
    <tr>

              <th>Journal Title</th>
              <th>Author</th>
              <th>Focus</th>
              <th>Paper</th>
              <th>Year</th>
              <th>Download</th>
            </tr>
  </thead>



        </table>


  </div>
</div>
<script type="text/javascript">
            $(document).ready(function() {
                $('#tableData').paging({limit:5});
  });
            });
        </script>

分页代码

(function($) {
    $(function() {
        $.widget("zpd.paging", {
            options: {
                limit: 5,
                rowDisplayStyle: 'block',
                activePage: 0,
                rows: []
            },
            _create: function() {
                var rows = $("tbody", this.element).children();
                this.options.rows = rows;
                this.options.rowDisplayStyle = rows.css('display');
                var nav = this._getNavBar();
                this.element.after(nav);
                this.showPage(0);
            },
            _getNavBar: function() {
                var rows = this.options.rows;
                var nav = $('<div>', {class: 'paging-nav'});
                for (var i = 0; i < Math.ceil(rows.length / this.options.limit); i++) {
                    this._on($('<a>', {
                        href: '#',
                        text: (i + 1),
                        "data-page": (i)
                    }).appendTo(nav),
                            {click: "pageClickHandler"});
                }
                //create previous link
                this._on($('<a>', {
                    href: '#',
                    text: '<<',
                    "data-direction": -1
                }).prependTo(nav),
                        {click: "pageStepHandler"});
                //create next link
                this._on($('<a>', {
                    href: '#',
                    text: '>>',
                    "data-direction": +1
                }).appendTo(nav),
                        {click: "pageStepHandler"});
                return nav;
            },
            showPage: function(pageNum) {
                var num = pageNum * 1; //it has to be numeric
                this.options.activePage = num;
                var rows = this.options.rows;
                var limit = this.options.limit;
                for (var i = 0; i < rows.length; i++) {
                    if (i >= limit * num && i < limit * (num + 1)) {
                        $(rows[i]).css('display', this.options.rowDisplayStyle);
                    } else {
                        $(rows[i]).css('display', 'none');
                    }
                }
            },
            pageClickHandler: function(event) {
                event.preventDefault();
                $(event.target).siblings().attr('class', "");
                $(event.target).attr('class', "selected-page");
                var pageNum = $(event.target).attr('data-page');
                this.showPage(pageNum);
            },
            pageStepHandler: function(event) {
                event.preventDefault();
                //get the direction and ensure it's numeric
                var dir = $(event.target).attr('data-direction') * 1;
                var pageNum = this.options.activePage + dir;
                //if we're in limit, trigger the requested pages link
                if (pageNum >= 0 && pageNum < this.options.rows.length) {
                    $("a[data-page=" + pageNum + "]", $(event.target).parent()).click();
                }
            }
        });
    });
})(jQuery);

Answer 1

我在使用相同的分页代码时遇到了同样的问题。

这可能不是最好的解决方案，但我最终做的是每次从服务器接收到新数据时删除并重新创建表。

这就是我在 HTML 中声明表格的方式：

<div class="right_col" role="main">
  <table id="dataTable" class="table">
    <thead>
      <tr id="dataTableRow">
        <th>Status</th>
        <th>Email</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
        <th>Gender</th>
        <th>City</th>
        <th>Title</th>
        <th>Company</th>              
        <th>Phone Number</th>
        <th>Social Networks</th>
      </tr>
    </thead>
    <tbody class="member" id="table_details">
    </tbody>
  </table>
</div>

并且每次从服务器接收到新数据时，都会调用这个函数：

function updateTable(json) {
  // First, we remove the table and the paging from the DOM
  $('#dataTable').remove();
  $('.paging-nav').remove();

  // Then we recreate it
  $('.right_col').append('<table id="dataTable" class="table"><thead><tr id="dataTableRow"><th>Status</th><th>Email</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Gender</th><th>City</th><th>Title</th><th>Company</th><th>Phone Number</th><th>Social Networks</th></tr></thead><tbody class="member" id="table_details"></tbody></table>');

  // We fill rows with the dynamic data from the json and append it to the table the same way you do  
  ...

  // Finally, we call the paging function again
  $('#dataTable').paging({
    limit: 10,
    rowDisplayStyle: 'block',
    activePage: 0,
    rows: []
  });

---

PS：顺便说一句，在_getNavBar函数中，你应该替换

this._on($('<a>', {
  href: '#',
  text: (i + 1),
  "data-page": (i)

与

this._on($('<a>', {
  href: '#',
  text: (i + 1),
  "data-page": (i),
  "class": i == 0 ? "selected-page" : ""

这样，当您首次启动页面时，第一页将具有“selected-page”类。