比较来自世界各地的卖家的域名和 IT 服务价格

如何在表中使用分区 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, 我现在正在努力实施
已邀请:

知食

赞同来自:

很多次我们可以使用表格运行到页面 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/

江南孤鹜

赞同来自:

这是一个内置的非常简单且有效的效用 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"/}/;
}/;

小明明

赞同来自:

对我来说最好而简单的方式 - 靴子
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' 表示您想要的页面上有多少项。

郭文康

赞同来自:

您可以使用此功能。 . 他被带走了
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//;

}
}/;
}

龙天

赞同来自:

有一种简单的方法可以在页面上拆分表
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>

奔跑吧少年

赞同来自:

纯的 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';

}

}

快网

赞同来自:

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

实际的

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

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


function test/pageNumber/
{

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

}


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

快网

赞同来自:

参考答案 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/;
}/;
}
}/;
}/;

要回复问题请先登录注册