javascript - 在下拉列表中显示记录数

Question

我正在使用使用来自 mysql 的数据对表格网格进行分页的代码。这工作正常。但是，我遇到的一个问题是要显示的记录数已编码到脚本中。

我需要做的是为用户提供一个在下拉列表中显示 [5] [10][20] 的选项。我发布的代码可以实现这一点吗？非常感谢

$('table.paginated').each(function() {
  var currentPage = 0;
  var numPerPage = 8;
  var $table = $(this);
  $table.bind('repaginate', function() {
    $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
  });
  $table.trigger('repaginate');
  var numRows = $table.find('tbody tr').length;
  var numPages = Math.ceil(numRows / numPerPage);
  var $pager = $('<div class="pager"></div>');
  for (var page = 0; page < numPages; page++) {
    $('<span class="page-number"></span>').text(page + 1).bind('click', {
      newPage: page
    }, function(event) {
      currentPage = event.data['newPage'];
      $table.trigger('repaginate');
      $(this).addClass('active').siblings().removeClass('active');
    }).appendTo($pager).addClass('clickable');
  }
  $pager.insertBefore($table).find('span.page-number:first').addClass('active');
});

Answer 1

给你。我想这就是你想要的。我将 5、10、20 选项添加为可点击链接，但我现在意识到您在下拉列表中要求了它们。不过，原理保持不变 - 它依赖于 numPerPage 可以在点击事件关闭内更改的事实

[更新:更改为使用下拉菜单]

    $('table.paginated').each(function() {
        var currentPage = 0;
        var numPerPage = 8;
        var numPages;
        var $table = $(this);
var $pager = $('<div class="pager"></div>');
        $table.bind('repaginate', function() {
$pager.empty();
            var numRows = $table.find('tbody tr').length;
            numPages = Math.ceil(numRows / numPerPage);

        for (var page = 0; page < numPages; page++) {
            $('<span class="page-number"></span>').text(page + 1).bind('click', {
                newPage: page
            }, function(event) {
                currentPage = event.data['newPage'];
                $table.trigger('repaginate');
                $(this).addClass('active').siblings().removeClass('active');
            }).appendTo($pager).addClass('clickable');
        }
        $pager.insertBefore($table).find('span.page-number:first').addClass('active');



            $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
        });
        $table.trigger('repaginate');
        
        

        var $numberPicker = $('<div class="numberPicker"></div>');
        var dropdown = $('<select></select>');
        $([5,10,20]).each(function() {
            var $num = this;
            $('<option></option>').text(this).attr('value',this).appendTo(dropdown);
        });
        dropdown.bind('change', function() {
            numPerPage = this.value;
            $table.trigger('repaginate');
        }).insertAfter($table);    

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <table class='paginated'>
        <tbody>
        <tr><td>1</td></tr>
        <tr><td>2</td></tr>
        <tr><td>3</td></tr>
        <tr><td>4</td></tr>
        <tr><td>5</td></tr>
        <tr><td>6</td></tr>
        <tr><td>7</td></tr>
        <tr><td>8</td></tr>
        <tr><td>9</td></tr>
        <tr><td>10</td></tr>
        <tr><td>11</td></tr>
        <tr><td>12</td></tr>
        <tr><td>13</td></tr>
        <tr><td>14</td></tr>
        <tr><td>15</td></tr>
        <tr><td>16</td></tr>
        <tr><td>17</td></tr>
        <tr><td>18</td></tr>
        <tr><td>19</td></tr>
        <tr><td>20</td></tr>
        <tr><td>21</td></tr>
        <tr><td>22</td></tr>
        <tr><td>23</td></tr>
        <tr><td>24</td></tr>
        <tr><td>25</td></tr>
        <tr><td>26</td></tr>
        <tr><td>27</td></tr>
        <tr><td>28</td></tr>
        <tr><td>29</td></tr>
        <tr><td>30</td></tr>
        <tr><td>31</td></tr>
        <tr><td>32</td></tr>
        <tr><td>33</td></tr>
        <tr><td>34</td></tr>
        <tr><td>35</td></tr>
        <tr><td>36</td></tr>
        <tr><td>37</td></tr>
        <tr><td>38</td></tr>
        <tr><td>39</td></tr>
        <tr><td>40</td></tr>
        <tr><td>41</td></tr>
        <tr><td>42</td></tr>
        <tr><td>43</td></tr>
        <tr><td>44</td></tr>
        <tr><td>45</td></tr>
        <tr><td>46</td></tr>
        <tr><td>47</td></tr>
        <tr><td>48</td></tr>
        <tr><td>49</td></tr>
        <tr><td>50</td></tr>
        <tr><td>51</td></tr>
        <tr><td>52</td></tr>
        <tr><td>53</td></tr>
        </tbody>
    </table>