我使用的代码使用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');
});
答案 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事件的闭包中更改的事实
[更新:更改为使用下拉列表]
<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;