Javascript 如何为表数据和排序创建分页？

我有一个表，我想为它创建分页和排序

分页方式如下：prevnext[<1/10>]

怎么做

这是我的代码：

<table id="datas">
    <tr>
        <th scope="col">Item</th>
        <th scope="col">Availability</th>
        <th scope="col">Qty</th>
        <th scope="col">Price</th>
    </tr>
    <tr>
        <td>Do Krug</td>
        <td>In Stock</td>
        <td>1</td>
        <td>$30.02</td>
    </tr>
    <tr>
        <td>A Parolyn Chandler</td>
        <td>In Stock</td>
        <td>2</td>
        <td>$52.94 ($26.47 &#215; 2)</td>
    </tr>
    <tr>
        <td>Inmy Sharp</td>
        <td>Out of Stock</td>
        <td>1</td>
        <td>$22.23</td>
    </tr>
    <tr>
        <td>Bulerholm</td>
        <td>In Stock</td>
        <td>1</td>
        <td>$30.17</td>
    </tr>
</table>

项目
可利用性
数量
价格
杜克鲁格
有现货的
1.
$30.02
假释犯钱德勒
有现货的
2.
$52.94 ($26.47 × 2)
在我的锐利
缺货
1.
$22.23
布勒霍姆
有现货的
1.
$30.17

这是一个非常好的php分页教程。另外，您需要对其进行一个小的更新，将所有

mysql

引用更改为

mysqli

---

谢谢

我建议使用jQuery进行此操作。以前，我使用了一个名为DataTables的插件。使用起来非常简单

这似乎符合你的要求。它还允许额外的样式和定制等。祝你好运

---

n、 i.

我已经将jQuery tablesorter与tablesorter寻呼机插件一起使用。您需要将这些代码添加到您的项目中，然后只需要向该页面添加大约15行代码

您的JavaScript：

$(document).ready(function() { 
    $("#datas").tablesorter({widthFixed: true, widgets: ['zebra']}) 
    $("#datas").tablesorterPager({container: $("#pager")}); 
}); 

您的HTML：

<div id="pager" class="pager">
<form>
    <img src="../addons/pager/icons/first.png" class="first"/>
    <img src="../addons/pager/icons/prev.png" class="prev"/>
    <input type="text" class="pagedisplay"/>
    <img src="../addons/pager/icons/next.png" class="next"/>
    <img src="../addons/pager/icons/last.png" class="last"/>
    <select class="pagesize">
        <option selected="selected"  value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option  value="40">40</option>
    </select>
</form>
</div>

<table id="datas" class="tablesorter">
<thead>
<tr>
    <th scope="col">Item</th>
    <th scope="col">Availability</th>
    <th scope="col">Qty</th>
    <th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
    <td>Do Krug</td>
    <td>In Stock</td>
    <td>1</td>
    <td>$30.02</td>
</tr>
<tr>
    <td>A Parolyn Chandler</td>
    <td>In Stock</td>
    <td>2</td>
    <td>$52.94 ($26.47 &#215; 2)</td>
</tr>
<tr>
    <td>Inmy Sharp</td>
    <td>Out of Stock</td>
    <td>1</td>
    <td>$22.23</td>
</tr>
<tr>
    <td>Bulerholm</td>
    <td>In Stock</td>
    <td>1</td>
    <td>$30.17</td>
</tr>
</tbody>
</table>

10
20
30
40
项目
可利用性
数量
价格
杜克鲁格
有现货的
1.
$30.02
假释犯钱德勒
有现货的
2.
$52.94 ($26.47 × 2)
在我的锐利
缺货
1.
$22.23
布勒霍姆
有现货的
1.
$30.17

我希望通过分页方式显示数据，如prevbtn 2/10 nextbttn。如果我单击下一个btn，它将显示下一个10数据，如果我单击prev btn，它将显示prev 10数据。StackOverflow不是write-my-code-for-me.com。你至少需要尝试一下，展示一下你的尝试：）我在网上找到了这把小提琴，你可以试试这个，也可以试试jquery dataTable。它有很多选择。你能澄清你的评论吗？不。请理解我的要求。我需要对表数据进行分页。如何使用..发送js脚本使用我在帖子中提供的两个链接--下载并使用它们。等等..我正在检查.js fiddle发送给我.请帮助我..以下文件包含在我的html文件jquery.js，jquery.mouseweel.js，bootstrap.min.js，uu jquery.tablesorter.js，jquery.tablesorter.pager.js中，所以我得到了thios错误：c未定义[Break On This error]c.page=（c.totalPages-1）；