显示下拉列表中的记录数

时间:2018-02-13 11:59:45

标签: javascript jquery

我使用的代码使用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');
});

1 个答案:

答案 0 :(得分:1)

你走了。我想,这可以做你想要的。我添加了5,10,20个选项作为可点击链接,但我现在意识到你在下拉列表中询问了它们。但原则仍然相同 - 它依赖于 $('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); });可以在click事件的闭包中更改的事实

[更新:更改为使用下拉列表]

&#13;
&#13;
<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>
&#13;
{{1}}
&#13;
&#13;
&#13;