如何使用SimplePagination jquery [英] How to use SimplePagination jquery
问题描述
我正在尝试在我的代码上使用 simplePagination 。 （我正在开发使用MVC4 C＃）
假设我有这样的代码
<表>
< thead>
< tr>
< td>< input type =checkboxname =select-allid =select-all/>< / td>
< td style =text-align：left>名称< / td>
< td style =text-align：left>创建者< / td>
< td style =text-align：left>创建日期< / td>
< / tr>
< / thead>
< tbody>
< tr class =post>
< td>< p>< input Length =0name =314type =checkboxvalue =true/>< input name =314type =hidden value =false/>< / p>< / td>
< td> Window< / td>
< td> John< / td>
< td> 01/01/2014 12:00:00 AM< / td>
< / tr>
< tr class =post>
< td>< p>< input Length =0name =314type =checkboxvalue =true/>< input name =314type =hidden value =false/>< / p>< / td>
< td> Door< / td>
< td> Chris< / td>
< td> 01/01/2014 12:00:00 AM< / td>
< / tr>
< tr class =post>
< td>< p>< input Length =0name =314type =checkboxvalue =true/>< input name =314type =hidden value =false/>< / p>< / td>
< td>楼层< / td>
< td>迈克尔< / td>
< td> 01/01/2014 12:00:00 AM< / td>
< / tr>
< tr class =post>
< td>< p>< input Length =0name =314type =checkboxvalue =true/>< input name =314type =hidden value =false/>< / p>< / td>
< td> Car< / td>
< td> James< / td>
< td> 01/01/2014 12:00:00 AM< / td>
< / tr>
< tr class =post>
< td>< p>< input Length =0name =314type =checkboxvalue =true/>< input name =314type =hidden value =false/>< / p>< / td>
< td> Bike< / td>
< td> Steven< / td>
< td> 01/01/2014 12:00:00 AM< / td>
< / tr>
< / tbody>
< / table>
*注意：在上面的代码中，我向每个'tr'添加类'post'表体）。而这些行是通过for循环（C＃）动态生成的。如果我想使用 simplePagination 我必须声明如下的jquery：
< code $> $（$）$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $
}）;
}）;
其实我不太确定如何使用（*如何调用）这个 simplePagination 。这是我第一次处理分页。
我已经试过把这段代码放在表格后面了
< ; div class =pagination-page>< / div>
然后用'.pagination-page'改变jquery调用方法中的'Selector'，但它没有' （$ {
$（'。pagination-page'）。pagination {（$ {
itemsOnPage：10，
cssStyle：'light-theme'
}）;
}）;
- 我应该用类名替换'Selector'吗？如果是，我该怎么做？
- 其次是我该如何声明 simplePagination ，这样它就会为每个页面显示只有2行（只有2个'Post'）。
*仅在第一页显示
+ ------------------------------------------ -------- +
| [] |名称| CreatedBy | CreatedDate |
| --------------------------------------------- ----- |
| [] |窗口|约翰| 01/01/2014 12:00:00 AM |
| [] |门|克里斯| 01/01/2014 12:00:00 AM |
+ --------------------------------------------- ----- +
第二页显示
+ ----------------------------------- --------------- +
| [] |名称| CreatedBy | CreatedDate |
| --------------------------------------------- ----- |
| [] |地板|迈克尔| 01/01/2014 12:00:00 AM |
| [] |汽车|詹姆斯| 01/01/2014 12:00:00 AM |
+ --------------------------------------------- ----- +
等等。
*注意：我不确定这个jquery如何检测我们有多少物品并生成页数并相应放置这些物品。 解决方案
有一点需要注意，这个插件可能会让一些人感到困惑，因为它在技术上并没有实现分页本身。它生成一个页面导航器，并通过jQuery事件提供手段，以简单地将它连接到我们自己的分页功能。
假设您已经按照步骤1（和2如果你想要CSS样式），你需要从你的问题中包含的 simplePagination 链接下面的jQuery会做你需要的：
jQuery（function（$）{
//考虑添加一个ID
var items = $（table tbody tr）;
var numItems = items.length;
var perPage = 2;
//只显示前2个（或第一个`per_page`）项目。
items.slice（perPage）.hide（）;
//现在使用`.pagination-page` div设置分页
$（。pagination-page）。pagination（{
items：numItems，
itemsOnPage：perP年龄，
cssStyle：light-theme，
//这是实际的页面更改功能。
onPageClick：function（pageNumber）{
//我们需要适当地显示和隐藏`tr`s。
var showFrom = perPage *（pageNumber - 1）;
var showTo = showFrom + perPage;
//我们会先隐藏所有...
items.hide（）
// ...然后只显示相应的行。
.slice（showFrom，showTo）.show（）;
}
}）;
//编辑：让我们讨论URL片段（即URL中的＃page-3）。
//更彻底地解释（包括正则表达式）：
// https://github.com/bilalakil/bin/tree/master/simplepagination/page-fragment/index.html
//我们将创建一个函数来检查URL片段
//并相应地触发页面更改。
函数checkFragment（）{
//如果没有散列，请像第1页那样对待它。
var hash = window.location.hash || ＃页面-1;
//我们将使用正则表达式来检查散列字符串。
hash = hash.match（/ ^＃page-（\d +）$ /）;
if（hash）{
//`selectPage`函数在文档中有描述。
//我们已经在正则表达式组中捕获了页码：`（\d +）`。
$（。pagination-page）。pagination（selectPage，parseInt（hash [1]））;
}
};
//每当按下后退/前进时，我们都会调用这个函数...
$（window）.bind（popstate，checkFragment）;
// ...我们也会在页面加载
//（这就是现在）时调用它。
checkFragment（）;
}）;
您可以找到一个正在运行的示例这里，以及关于simplePagination更全面的指南 here <如果你想更全面地了解这一切的实际工作原理。
编辑：添加了一段代码来处理URL片段正如Mike O'Connor所强调的那样需要重新加载和后退/前进。您可以在这里看到的URL片段处理示例。编辑2：如果您需要跨浏览器兼容性来更新后退/前进分片（即IE11 ...），请包括在执行上述代码之前， History.js 脚本。感谢Mike O'Connor提供的）：
编辑3：如果您要动态添加或删除内容，您需要手动更新分页器以反映这些更改。我也为此举了一个例子。您可以在此处看到它。
I am trying to use simplePagination on my code. (I am developing using MVC4 C#)
Let say I have this bunch of codes
<table>
<thead>
<tr>
<td><input type="checkbox" name="select-all" id="select-all" /></td>
<td style="text-align: left">Name</td>
<td style="text-align: left">Created By</td>
<td style="text-align: left">Created Date</td>
</tr>
</thead>
<tbody>
<tr class="post">
<td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
<td>Window</td>
<td>John</td>
<td>01/01/2014 12:00:00 AM</td>
</tr>
<tr class="post">
<td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
<td>Door</td>
<td>Chris</td>
<td>01/01/2014 12:00:00 AM</td>
</tr>
<tr class="post">
<td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
<td>Floor</td>
<td>Michael</td>
<td>01/01/2014 12:00:00 AM</td>
</tr>
<tr class="post">
<td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
<td>Car</td>
<td>James</td>
<td>01/01/2014 12:00:00 AM</td>
</tr>
<tr class="post">
<td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
<td>Bike</td>
<td>Steven</td>
<td>01/01/2014 12:00:00 AM</td>
</tr>
</tbody>
</table>
*Note: In the code above I add class 'post' to each 'tr' (row in table body). And these rows are generated dynamically by for loop (C#)
And from the documentation if I want to use simplePagination I have to declare the jquery like this:
$(function() {
$(selector).pagination({
items: 100,
itemsOnPage: 10,
cssStyle: 'light-theme'
});
});
Actually I am not pretty sure how to use (*how to call) this simplePagination. It's my first time dealing with pagination.
I already tried to put this code after the table
<div class="pagination-page"></div>
And change 'Selector' inside jquery calling method with '.pagination-page', but it didn't work.
$(function() {
$('.pagination-page').pagination({
items: 100,
itemsOnPage: 10,
cssStyle: 'light-theme'
});
});
- Should I replace 'Selector' with a class name? If yes, how do I do that?
- Second is how do I declare this simplePagination so that it will show only 2 rows (Only 2 class 'Post') for each page?
*Means in the first page it will only show
+--------------------------------------------------+
| [] | Name | CreatedBy | CreatedDate |
|--------------------------------------------------|
| [] | Window | John | 01/01/2014 12:00:00 AM |
| [] | Door | Chris | 01/01/2014 12:00:00 AM |
+--------------------------------------------------+
The second page will show
+--------------------------------------------------+
| [] | Name | CreatedBy | CreatedDate |
|--------------------------------------------------|
| [] | Floor | Michael | 01/01/2014 12:00:00 AM |
| [] | Car | James | 01/01/2014 12:00:00 AM |
+--------------------------------------------------+
So on..
*Note: I am not sure how this jquery will detect how many items we have and generate number of pages and put those items accordingly.
One thing to note about this plugin, which a few people may get confused about, is that it technically doesn’t implement pagination itself. It generates a page navigator and provides the means, via jQuery events, to simply hook it up to our own pagination functionality.
Assuming you've followed the steps 1 (and 2 if you want the CSS styling) required from the simplePagination link you included in your question then the following jQuery will do what you need:
jQuery(function($) {
// Consider adding an ID to your table
// incase a second table ever enters the picture.
var items = $("table tbody tr");
var numItems = items.length;
var perPage = 2;
// Only show the first 2 (or first `per_page`) items initially.
items.slice(perPage).hide();
// Now setup the pagination using the `.pagination-page` div.
$(".pagination-page").pagination({
items: numItems,
itemsOnPage: perPage,
cssStyle: "light-theme",
// This is the actual page changing functionality.
onPageClick: function(pageNumber) {
// We need to show and hide `tr`s appropriately.
var showFrom = perPage * (pageNumber - 1);
var showTo = showFrom + perPage;
// We'll first hide everything...
items.hide()
// ... and then only show the appropriate rows.
.slice(showFrom, showTo).show();
}
});
// EDIT: Let's cover URL fragments (i.e. #page-3 in the URL).
// More thoroughly explained (including the regular expression) in:
// https://github.com/bilalakil/bin/tree/master/simplepagination/page-fragment/index.html
// We'll create a function to check the URL fragment
// and trigger a change of page accordingly.
function checkFragment() {
// If there's no hash, treat it like page 1.
var hash = window.location.hash || "#page-1";
// We'll use a regular expression to check the hash string.
hash = hash.match(/^#page-(\d+)$/);
if(hash) {
// The `selectPage` function is described in the documentation.
// We've captured the page number in a regex group: `(\d+)`.
$(".pagination-page").pagination("selectPage", parseInt(hash[1]));
}
};
// We'll call this function whenever back/forward is pressed...
$(window).bind("popstate", checkFragment);
// ... and we'll also call it when the page has loaded
// (which is right now).
checkFragment();
});
You can find a running example here, and a more thorough guide on simplePagination here if you want to more thoroughly understand how this all actually works.
EDIT: Added a section of code to handle URL fragments (on reload and on back/forward) as Mike O'Connor highlighted the need for. You can see a live example of URL fragment handling here.
EDIT 2: If you need cross-browser compatibility for the back/forward fragment updating (i.e. IE11...), include the History.js script before implementing the above code. Thanks to Mike O'Connor for that :)
EDIT 3: If you're dynamically adding or removing content you'll need to manually update the paginator to reflect these changes. I've whipped up an example for that too. You can see it running here.
这篇关于如何使用SimplePagination jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
