如何在表中使用分区 HTML?

我想用这个
http://flaviusmatis.github.io/simplePagination.js/
在我的桌面页面上的纸张 HTML /特别是， light theme/, 但由于某种原因我无法理解如何在我的页面上连接这个库 HTML, 因此，分页代码在我的桌子上工作 HTML..

现在我有一张桌子 HTML 没有页面上的任何编码代码，所以下面的代码 HTML 向您展示一个表格上的所有行，我不需要...

我想展示 6 使用上面的页面编号，在我的表格中的项目 javascript.. 一旦我点击页面上的分区的第二个选项卡，它应该向我展示以下六点，并继续前进，直到它完成。

下面是我的完整代码 HTML, 我试图使用同样的分页 javascript, 但它对我不起作用..


<html>

<head>

<script src="[url=http://code.jquery.com/jquery-1.9.1.min.js"></script>]http://code.jquery.com/jquery- ... gt%3B[/url]

<script src="../jquery.simplePagination.js"></script>

<link href="../simplePagination.css" rel="stylesheet" type="text/css"/>

<style type="text/css">

table {

 width: 40em;

 margin: 2em auto;

 }



 thead {

 background: #000;

 color: #fff;

 }



 td {

 width: 10em;

 padding: 0.3em;

 }



 tbody {

 background: #ccc;

 }



 </style>

<script>



function test/pageNumber/

{



 var page="#page-id-"+pageNumber;

 $/'.select'/.hide//

 $/page/.show//



}



</script>

</head>

<body bgcolor="#F8F8F8">

<table class="paginated">

<thead>

<tr>

<th>A</th>

<th>B</th>

<th>C</th>

<th>D</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

</tbody>

</table>

<div id="choose">

</div>

<script language="javascript">

 $/function// {

 $/'#choose'/.pagination/{

 items: 20,

 itemsOnPage: 2,

 cssStyle: 'light-theme',

 onPageClick: function/pageNumber/{test/pageNumber/}

 }/;

 }/;

 </script>

</body>

</html>


任何简单的例子 jsfiddle, 基于我的上述代码 HTML, 以及与上述分页组合 javascript, 将帮助我更好地了解如何模仿这一点 js 在桌子上 HTML..

谢谢您的帮助..

NOTE

:-

我只是对决定感兴趣 simplePagination.js, 我现在正在努力实施
2021-03-20 添加评论
分享

没有找到相关结果

    已邀请:

    知食

    赞同来自:

    很多次我们可以使用表格运行到页面 jquery. 在这里，我会给你一个答案和参考链接。

    Jquery


    $/document/.ready/function//{
    
 $/'#data'/.after/'<div id="nav"></div>'/;
    
 var rowsShown = 4;
    
 var rowsTotal = $/'#data tbody tr'/.length;
    
 var numPages = rowsTotal/rowsShown;
    
 for/i = 0;i < numPages;i++/ {
    
 var pageNum = i + 1;
    
 $/'#nav'/.append/'<a href="#" rel="'+i+'">'+pageNum+'</a> '/;
    
 }
    
 $/'#data tbody tr'/.hide//;
    
 $/'#data tbody tr'/.slice/0, rowsShown/.show//;
    
 $/'#nav a:first'/.addClass/'active'/;
    
 $/'#nav a'/.bind/'click', function//{
    

    
 $/'#nav a'/.removeClass/'active'/;
    
 $/this/.addClass/'active'/;
    
 var currPage = $/this/.attr/'rel'/;
    
 var startItem = currPage * rowsShown;
    
 var endItem = startItem + rowsShown;
    
 $/'#data tbody tr'/.css/'opacity','0.0'/.hide//.slice/startItem, endItem/.
    
 css/'display','table-row'/.animate/{opacity:1}, 300/;
    
 }/;
    
 }/;


    JSfiddle: https://jsfiddle.net/u9d1ewsh/
    2021-03-20 0 0
    分享

    江南孤鹜

    赞同来自:

    这是一个内置的非常简单且有效的效用 jquery 实施分页 html table
    http://tablesorter.com/docs/example-pager.html
    下载插件OT.
    http://tablesorter.com/addons/ ... er.js
    添加此插件后，将以下代码添加到 head script


    $/document/.ready/function// { 
    
 $/"table"/ 
    
 .tablesorter/{widthFixed: true, widgets: ['zebra']}/ 
    
 .tablesorterPager/{container: $/"#pager"/}/; 
    
}/;
    2021-03-20 0 0
    分享

    小明明

    赞同来自:

    对我来说最好而简单的方式 - 靴子
    http://www.bootply.com/lxa0FF9yhw#
    #

    首先打开 Bootstrap 在你的项目中

    然后打开文件 javascript, 您在其中编写此代码：


    $.fn.pageMe = function/opts/{
    
 var $this = this,
    
 defaults = {
    
 perPage: 7,
    
 showPrevNext: false,
    
 hidePageNumbers: false
    
 },
    
 settings = $.extend/defaults, opts/;
    

    
 var listElement = $this;
    
 var perPage = settings.perPage; 
    
 var children = listElement.children//;
    
 var pager = $/'.pager'/;
    

    
 if /typeof settings.childSelector!="undefined"/ {
    
 children = listElement.find/settings.childSelector/;
    
 }
    

    
 if /typeof settings.pagerSelector!="undefined"/ {
    
 pager = $/settings.pagerSelector/;
    
 }
    

    
 var numItems = children.size//;
    
 var numPages = Math.ceil/numItems/perPage/;
    

    
 pager.data/"curr",0/;
    

    
 if /settings.showPrevNext/{
    
 $/'<li><a class="prev_link" href="#">«</a></li>'/.appendTo/pager/;
    
 }
    

    
 var curr = 0;
    
 while/numPages > curr && /settings.hidePageNumbers==false//{
    
 $/'<li><a class="page_link" href="#">'+/curr+1/+'</a></li>'/.appendTo/pager/;
    
 curr++;
    
 }
    

    
 if /settings.showPrevNext/{
    
 $/'<li><a class="next_link" href="#">»</a></li>'/.appendTo/pager/;
    
 }
    

    
 pager.find/'.page_link:first'/.addClass/'active'/;
    
 pager.find/'.prev_link'/.hide//;
    
 if /numPages<=1/ {
    
 pager.find/'.next_link'/.hide//;
    
 }
    
 pager.children//.eq/1/.addClass/"active"/;
    

    
 children.hide//;
    
 children.slice/0, perPage/.show//;
    

    
 pager.find/'li .page_link'/.click/function//{
    
 var clickedPage = $/this/.html//.valueOf//-1;
    
 goTo/clickedPage,perPage/;
    
 return false;
    
 }/;
    
 pager.find/'li .prev_link'/.click/function//{
    
 previous//;
    
 return false;
    
 }/;
    
 pager.find/'li .next_link'/.click/function//{
    
 next//;
    
 return false;
    
 }/;
    

    
 function previous//{
    
 var goToPage = parseInt/pager.data/"curr"// - 1;
    
 goTo/goToPage/;
    
 }
    

    
 function next//{
    
 goToPage = parseInt/pager.data/"curr"// + 1;
    
 goTo/goToPage/;
    
 }
    

    
 function goTo/page/{
    
 var startAt = page * perPage,
    
 endOn = startAt + perPage;
    

    
 children.css/'display','none'/.slice/startAt, endOn/.show//;
    

    
 if /page>=1/ {
    
 pager.find/'.prev_link'/.show//;
    
 }
    
 else {
    
 pager.find/'.prev_link'/.hide//;
    
 }
    

    
 if /page
    
<thead>
    
<tr>
    
<th>...</th>
    
</tr>
    
</thead>
    
<tbody id="myTableBody">
    
</tbody>
    

    
<div class="col-md-12 text-center">
    
<ul class="pagination pagination-lg pager" id="myPager"></ul>
    
</div>


    将下载桌子的数据时，只需调用它。


    $/'#myTableBody'/.pageMe/{pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:4}/;


    在哪里价值 'perPage' 表示您想要的页面上有多少项。
    2021-03-20 0 0
    分享

    郭文康

    赞同来自:

    您可以使用此功能。 . 他被带走了
    https://convertintowordpress.c ... code/
    /


    function pagination//{
    
 var req_num_row=10;
    
 var $tr=jQuery/'tbody tr'/;
    
 var total_num_row=$tr.length;
    
 var num_pages=0;
    
 if/total_num_row % req_num_row ==0/{
    
 num_pages=total_num_row / req_num_row;
    
 }
    
 if/total_num_row % req_num_row >=1/{
    
 num_pages=total_num_row / req_num_row;
    
 num_pages++;
    
 num_pages=Math.floor/num_pages++/;
    
 }
    
 for/var i=1; i<=num_pages; i++/{
    
 jQuery/'#pagination'/.append/"<a class="btn" href="#">"+i+"</a>"/;
    
 }
    
 $tr.each/function/i/{
    
 jQuery/this/.hide//;
    
 if/i+1 <= req_num_row/{
    
 $tr.eq/i/.show//;
    
 }
    

    
 }/;
    
 jQuery/'#pagination a'/.click/function/e/{
    
 e.preventDefault//;
    
 $tr.hide//;
    
 var page=jQuery/this/.text//;
    
 var temp=page-1;
    
 var start=temp*req_num_row;
    
 //alert/start/;
    

    
 for/var i=0; i< req_num_row; i++/{
    

    
 $tr.eq/start+i/.show//;
    

    
 }
    
 }/;
    
}
    2021-03-20 0 0
    分享

    龙天

    赞同来自:

    有一种简单的方法可以在页面上拆分表
    http://jjppof.github.io/breedjs
    /插入 jQuery/, 见示例：

    HTML


    <table>
    
<thead>
    
<tr>
    
<th>Name</th>
    
<th>Gender</th>
    
<th>Age</th>
    
<th>Email</th>
    
</tr>
    
</thead>
    
<tbody>
    
<tr b-loop="person in people" b-paginate="5" b-scope="people">
    
<td>{{person.name}}</td>
    
<td>{{person.gender}}</td>
    
<td>{{person.age}}</td>
    
<td>{{person.email}}</td>
    
</tr>
    
</tbody>
    
</table>
    
<ul></ul>


    JS


    var data={ people: [ {...}, {...}, ...] };
    

    
$/function// {
    
 breed.run/{
    
 scope: 'people',
    
 input: data,
    
 runEnd: function//{ //This runEnd is just to mount the page buttons
    
 for/i=1 ; i<=breed.getPageCount/'people'/ ; i++/{
    
 $/'ul'/.append/
    
 $/'<li>',{
    
 html: i,
    
 onclick: "breed.paginate/{scope: 'people', page: " + i + "}/;"
    
 }/
    
 /;
    
 }
    
 }
    
 }/;
    
}/;


    每次要更改页面时，只需打电话即可：


    breed.paginate/{scope: 'people', page: pageNumber/;


    http://jjppof.github.io/breedjs/#b-paginate
    .

    https://jsfiddle.net/jjppof/h2epjt6f/
    .
    </li>
    2021-03-20 0 0
    分享

    奔跑吧少年

    赞同来自:

    纯的 JavaScript

    . 您可以立即将其应用于多个表格。 如果只需要一个页面，则中断。 我用Anushry作为起点。

    抱歉问，但显然这不是解决方案 simplePagignation.js. 尽管如此，这是最好的结果。 google, 当你拨打 "javascript 表Podkachka.", 这是许多人的合理解决方案，也可能考虑图书馆，但不确定是否继续这条路。

    使用这样的：


    addPagerToTables/'#someTable', 8/;


    没有任何要求 css, 虽然可能是明智地隐藏桌子的行 tBody 在 css 在任何情况下，要防止字符串的显示效果，然后快速隐藏 /现在不会发生在我身上，但这就是我以前见过的/.

    代码：


    function addPagerToTables/tables, rowsPerPage = 10/ {
    

    
 tables = 
    
 typeof tables == "string"
    
 ? document.querySelectorAll/tables/
    
 : tables;
    

    
 for /let table of tables/ 
    
 addPagerToTable/table, rowsPerPage/;
    

    
}
    

    
function addPagerToTable/table, rowsPerPage = 10/ {
    

    
 let tBodyRows = table.querySelectorAll/'tBody tr'/;
    
 let numPages = Math.ceil/tBodyRows.length/rowsPerPage/;
    

    
 let colCount = 
    
 [].slice.call/
    
 table.querySelector/'tr'/.cells
    
 /
    
 .reduce//a,b/ => a + parseInt/b.colSpan/, 0/;
    

    
 table
    
 .createTFoot//
    
 .insertRow//
    
 .innerHTML = `<td colspan="${colCount}"><div class="nav"></div></td>`;
    

    
 if/numPages == 1/
    
 return;
    

    
 for/i = 0;i < numPages;i++/ {
    

    
 let pageNum = i + 1;
    

    
 table.querySelector/'.nav'/
    
 .insertAdjacentHTML/
    
 'beforeend',
    
 `<a href="#" rel="${i}">${pageNum}</a> ` 
    
 /;
    

    
 }
    

    
 changeToPage/table, 1, rowsPerPage/;
    

    
 for /let navA of table.querySelectorAll/'.nav a'//
    
 navA.addEventListener/
    
 'click', 
    
 e => changeToPage/
    
 table, 
    
 parseInt/e.target.innerHTML/, 
    
 rowsPerPage
    
 /
    
 /;
    

    
}
    

    
function changeToPage/table, page, rowsPerPage/ {
    

    
 let startItem = /page - 1/ * rowsPerPage;
    
 let endItem = startItem + rowsPerPage;
    
 let navAs = table.querySelectorAll/'.nav a'/;
    
 let tBodyRows = table.querySelectorAll/'tBody tr'/;
    

    
 for /let nix = 0; nix < navAs.length; nix++/ {
    

    
 if /nix == page - 1/
    
 navAs[nix].classList.add/'active'/;
    
 else 
    
 navAs[nix].classList.remove/'active'/;
    

    
 for /let trix = 0; trix < tBodyRows.length; trix++/ 
    
 tBodyRows[trix].style.display = 
    
 /trix >= startItem && trix < endItem/
    
 ? 'table-row'
    
 : 'none'; 
    

    
 }
    

    
}
    2021-03-20 0 0
    分享

    快网

    赞同来自:

    据我所知，在这个插件的网站上 paginations, 插件本身不会符合

    实际的

    页面的破损。 他唯一做的是 - 这会显示多个数字，并根据您的页面显示正确的按钮。

    但是，为了实际拆分页面上的页面，您必须写适当 Javascript 独自的。 它必须被放置 Javascript:


    function test/pageNumber/
    
{
    

    
 var page="#page-id-"+pageNumber;
    
 $/'.select'/.hide//
    
 $/page/.show//
    

    
}


    这是一个代码，正如我假设的那样，你从某个地方复制，但目前他真的没有任何东西。 如果你不知道 Javascript, 然后，您可能希望与另一个库一起使用，该库真正使拆分表上页面上。
    2021-03-20 0 0
    分享

    快网

    赞同来自:

    参考答案 Anusree 上面和尊重，我正确纠正了代码，以确保它在大多数情况下工作。

    创建了可重复使用的功能 paginate /'#myTableId'/, 这可能是由任何表的任何次引起的。

    在函数内添加代码 ajaxComplete, 确保在完整表下载后调用PODS jquery. 我们使用PODACHING主要用于基于桌子 ajax.

    删除页面编号 div 并为挑战的每个分区领带

    设置页面上的行数

    代码：


    $/document/.ready/function // {
    
 $/document/.ajaxComplete/function // {
    
 paginate/'#myTableId',10/;
    
 function paginate/tableName,RecordsPerPage/ {
    
 $/'#nav'/.remove//;
    
 $/tableName/.after/'<div id="nav"></div>'/;
    
 var rowsShown = RecordsPerPage;
    
 var rowsTotal = $/tableName + ' tbody tr'/.length;
    
 var numPages = rowsTotal / rowsShown;
    
 for /i = 0; i < numPages; i++/ {
    
 var pageNum = i + 1;
    
 $/'#nav'/.append/'<a href="#" rel="' + i + '">' + pageNum + '</a> '/;
    
 }
    
 $/tableName + ' tbody tr'/.hide//;
    
 $/tableName + ' tbody tr'/.slice/0, rowsShown/.show//;
    
 $/'#nav a:first'/.addClass/'active'/;
    
 $/'#nav a'/.bind/'click', function // {
    

    
 $/'#nav a'/.removeClass/'active'/;
    
 $/this/.addClass/'active'/;
    
 var currPage = $/this/.attr/'rel'/;
    
 var startItem = currPage * rowsShown;
    
 var endItem = startItem + rowsShown;
    
 $/tableName + ' tbody tr'/.css/'opacity', '0.0'/.hide//.slice/startItem, endItem/.
    
 css/'display', 'table-row'/.animate/{ opacity: 1 }, 300/;
    
 }/;
    
 }
    
 }/;
    
}/;
    2021-03-20 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    Copyright © 2023, All Rights Reserved