当前位置:  编程技术>WEB前端

JQuery页面的表格数据的增加与分页的实现

    来源: 互联网  发布时间:2014-08-25

    本文导语:  代码如下: var countPage; var nowPag = 1; var pageSize; var countSize; var starIndex; var endIndex; // 用户提交信息 var name; var sex; var age; // 定义行号 var num = 1; $(document).ready(function() { // 注册添加用户的事件 $("#submit").click(function() { // 获取用户提交...

代码如下:

var countPage;
var nowPag = 1;
var pageSize;
var countSize;

var starIndex;
var endIndex;

// 用户提交信息
var name;
var sex;
var age;

// 定义行号
var num = 1;

$(document).ready(function() {
// 注册添加用户的事件
$("#submit").click(function() {
// 获取用户提交的信息
name = $("#name").val();
sex = $("input[name='sex']:checked").val();
age = $("#age").val();
pageSize = $("#selectSize option:selected").val();
// alert(name+sex+age+pageSize);

// 创建表格下的tr对象
$tr = $("");
$td1 = $("");
$td2 = $("");
$td3 = $("");
$td4 = $("");
$td5 = $("");

$tr.append($td1.append(""));
$tr.append($td2.append(name));
$tr.append($td3.append(sex));
$tr.append($td4.append(age));
$tr.append($td5.append(""));

$("#show").append($tr);
pageNation();

});
// 注册选择显示条数的操作
$("#selectSize").change(function() {
pageSize = $("#selectSize option:selected").val();
pageNation();
});

// 注册分页操作的按钮点击事件
$("#first").click(pageNation);
$("#back").click(pageNation);
$("#next").click(pageNation);
$("#last").click(pageNation);

});

// 分页操作的函数
var pageNation = function() {
// 获取所有的数据条数
countSize = $("#show tr").size();
// 获取总页数
countPage = Math.ceil(countSize / pageSize);

// 处理翻页的操作
if (this.nodeType == 1) {
var idValue = $(this).attr("id");
if ("first" == idValue) {
// alert(idValue);
nowPag = 1;
} else if ("back" == idValue) {
// alert(nowPag);
if (nowPag > 1) {
nowPag--;
}

} else if ("next" == idValue) {
// alert(idValue);
if (nowPag < countPage) {
nowPag++;
}
} else if ("last" == idValue) {
// alert(idValue);
nowPag = countPage;
}

}
// alert(pageSize);
// 获取显示开始和结束的下标
starIndex = (nowPag - 1) * pageSize + 1;
endIndex = nowPag * pageSize;

if (endIndex > countSize) {
// alert("下标大于总记录数"+endIndex);
endIndex = countSize;
}

if (countSize < pageSize) {
// alert("总记录数小小于每页的显示条数"+endIndex);
endIndex = countSize;
}

// alert(starIndex);

if (starIndex == endIndex) {
// 显示的操作
$("#show tr:eq(" + (starIndex - 1) + ")").show();
$("#show tr:lt(" + (starIndex - 1) + ")").hide();
} else {
// 显示的操作
$("#show tr:gt(" + (starIndex - 1) + ")").show();
$("#show tr:lt(" + (endIndex - 1) + ")").show();

// 隐藏的操作
$("#show tr:lt(" + (starIndex - 1) + ")").hide();
$("#show tr:gt(" + (endIndex - 1) + ")").hide();
}
// 改变底部显示操作
$("#sizeInfo")
.html(
"当前从" + starIndex + "条到第" + endIndex + "条记录,共" + countSize
+ "条记录.");
$("#pageInfo").html("当前是第" + nowPag + "页,共" + countPage + "页.");
};


[html] view plaincopy在CODE上查看代码片派生到我的代码片




用jquery实现







div {
border: 1px black solid;
}

#tableDiv {
height: 500px;
}

#insertDiv {
width: 300px;
margin-right: 550px;
}

#tableDiv {
width: 500px;
margin-left: 350px;
}

#top {
width: 500px;
height: 400px;
}

#topTable,#contentTable,#bottomTable {
width: 450px;
}













姓名


性别男女




年龄












全选
姓名
性别
密码
操作
















3
5
10



当前从0条到第0条记录.


当前是第0页,共0页.












    
 
 

您可能感兴趣的文章:

  • jQuery表格插件 Flexigrid for jQuery
  • jQuery电子表格插件 jQuery.sheet
  • jQuery电子表格插件 JQuery.Spreadsheet UI
  • JQuery实现动态表格点击按钮表格增加一行
  • jQuery 数据表格插件 jqxGrid
  • jQuery表格插件 jQuery grid view plugin
  • jQuery表格插件 DataTables
  • jQuery表格插件 ayGrid
  • jQuery表格插件 MagicGrid
  • jQuery如何获取表格总行数
  • jQuery 表格插件 cGrid
  • jQuery 表格插件 jui_datagrid
  • jQuery表格插件 colResizable
  • jQuery表格分页插件 Table Pagination
  • jQuery表格插件 Flexigrid
  • jQuery 表格响应式插件 FooTable
  • jQuery树形表格插件 jQTreeTable
  • jQuery 表格排序插件 Stupid Table
  • jQuery 表格数据渲染插件 GraphUp
  • 基于jQuery的表格组件 VDataTable
  • jQuery操作select option选项(增加 删除 修改)
  • jquery为页面增加快捷键示例
  • 为jquery的ajaxfileupload增加附加参数的方法
  • jquery随机增加文本框高度
  • jquery动态增加、删除表格行的例子
  • jquery创建表格、自动增加表格的实例代码
  • Jquery表格行动态增加与删除实例
  • jquery创建表格(自动增加表格)代码分享
  • jquery对table中各数据的增加、保存、删除操作示例 iis7站长之家
  • jquery对table中各数据的增加、保存、删除操作示例
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 通过javascript库JQuery实现页面跳转功能代码
  • jquery刷新页面 jquery局部刷新与及全页面刷新
  • jquery 父页面查找iframe子页面内容、子页面查找父页面内容
  • 解决用jquery load加载页面到div时,不执行页面js的问题
  • jQuery animate方法定位页面具体位置(示例)
  • jQuery页面加载完毕再执行代码多种方法
  • jQuery 页面加载 fakeLoader.js
  • jQuery 页面动画效果 Animsition
  • jQuery向导页面插件 jWizard
  • jquery 页面滚动到指定DIV的代码
  • jQuery 页面滚动插件 ScrollMe
  • jQuery页面元素缩放插件 Zoonooz.js
  • Jquery跳到页面指定位置的方法
  • jQuery页面滚动插件 toanywhere
  • jQuery 页面滚动插件 Scrolld.js
  • jQuery aminate方法定位到页面具体位置
  • 自适应页面背景插件 jQuery.resBg
  • jquery防止重复执行动画避免页面混乱
  • jQuery 页面切换插件 browserSwipe.js
  • jQuery 页面滚动插件 One Page Scroll
  • Jquery更换主题同时刷新iframe页面的代码举例
  • jQuery概述,代码举例及最新版下载
  • jQuery鼠标动画插件 jquery-ahover
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery向导插件 Jquery Wizard Plugin
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery圆角插件 jQuery Corners
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3