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

代码如下:

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 = $("<tr class='data' ></tr>");
$td1 = $("<td></td>");
$td2 = $("<td></td>");
$td3 = $("<td></td>");
$td4 = $("<td></td>");
$td5 = $("<td></td>");

$tr.append($td1.append("<input type='checkbox'>"));
$tr.append($td2.append(name));
$tr.append($td3.append(sex));
$tr.append($td4.append(age));
$tr.append($td5.append("<input type='button' value='删除'>"));

$("#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上查看代码片派生到我的代码片

<!DOCTYPE html>
<html>
<head>
<title>用jquery实现</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-2.0.3.min.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
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;
}
</style>

<script type="text/javascript" src="../js/jqueryTablePageNation.js"></script>
</head>

<body>
<div id="content" align="center">
<form action="">

<div id="insertDiv" style="width: 263px; ">
<table id="insertData" border="1px">
<tr>
<td>姓名<input type="text" id="name" value="donghogyu"></td>
</tr>
<tr>
<td>性别<input type="radio" name="sex" value="男"
checked="checked">男<input type="radio" name="sex"
value="女">女
</td>

</tr>
<tr>
<td>年龄<input type="text" id="age" value="21"></td>
</tr>
<tr>
<td align="center"><input type="button" id="submit"
value="添加数据"></td>
</tr>
</table>
</div>

<div id="tableDiv">
<div id="top">
<table id="topTable" border="1px">
<thead>

<th><input type="checkbox">全选</th>
<th>姓名</th>
<th>性别</th>
<th>密码</th>
<th>操作</th>

</thead>
<tbody id="show">

</tbody>
</table>
</div>

<div id="bottom">
<table id="bottomTable" border="1px">
<tr align="center">
<td><input type="button" value="首页" id="first"></td>
<td><input type="button" value="上一页" id="back"></td>
<td><input type="button" value="下一页" id="next"></td>
<td><input type="button" value="末页" id="last"></td>
<td><select id="selectSize">
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
</select>条</td>
</tr>
<tr align="center">
<td colspan="6"><span id="sizeInfo">当前从0条到第0条记录.</span></td>
</tr>
<tr align="center">
<td colspan="6"><span id="pageInfo">当前是第0页,共0页.</span></td>
</tr>
</table>

</div>
</div>

</form>
</div>
</body>
</html>

赞 (0)

相关推荐

  • jquery 表格分页等操作实现代码(pagedown，pageup)

    jquery 表格分页等操作实现代码(pagedown，pageup)

    没什么技术含量,先上图: 思路: 1:获取按键 2:判断当前表格行的位置 HTML结构: 复制代码 代码如下: <div id="formdiv" align="center"> firstname:<input type="text" id="firstname"/> lastname:<input type="text" id="lastname"/&g

  • 扩展jquery实现客户端表格的分页、排序功能代码

    扩展jquery实现客户端表格的分页、排序功能代码

    下载代码和示例:jqueryPaging.rar 使用方法如下: 复制代码 代码如下: <script language="javascript" type="text/javascript"> $("#myTable").tablePaging({ pageSize: 5, sorting: true, sortSelector: ".js-Order", sortType: "number"

  • 基于jQuery实现的无刷新表格分页实例

    基于jQuery实现的无刷新表格分页实例

    本文实例讲述了基于jQuery实现的无刷新表格分页.分享给大家供大家参考,具体如下: 效果图如下: html结构: <table id="cs_table" class="datatable"></table> css样式: html,body{margin: 0;padding:0} a:focus {outline: none;} /* 通用表格显示 */ table, th, td {font: 12px Arial,Helvetica

  • 基于jquery实现表格无刷新分页

    基于jquery实现表格无刷新分页

    本文实例讲解了基于jquery实现表格无刷新分页功能,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <title>面向对象的无刷新表格分页</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <link rel="stylesheet" hre

  • jQuery给表格添加分页效果

    jQuery给表格添加分页效果

    本文实例为大家分享了jQuery表格添加分页的具体代码,供大家参考,具体内容如下 1. 新建一个Table,添加十行数据 <table cellspacing="0"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> </tr> </thead> <tbody> <tr> <t

  • 利用jQuery实现一个简单的表格上下翻页效果

    前言 本文主要介绍的是利用jQuery实现一个简单的表格上下翻页效果,注:实现原理与轮播图相似.下面话不多说,来看看详细的 实现方法吧. html: <div class="popup day02-popup04"> <div class="group-caption"> <span>日期</span><span>参与团购场次</span><span class="result&

  • 基于jquery实现的表格分页实现代码

    具体代码如下: 引用js和css文件有: 复制代码 代码如下: <link ID="skin" rel="stylesheet" type="text/css" href="css/config.css"> <script type="text/javascript" src="js/config.js"></script> <script ty

  • 基于Jquery实现表格动态分页实现代码

    当页面点击分页图标时,程序会自动去后台获取对应页数的记录. 关键代码如下: 需要引入的css和js文件有: 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="<%=basePath %>css/theme/default/css/jpage.css"></link> <link ID="skin" rel="sty

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

    复制代码 代码如下: 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() { // 获取用户提交的

  • jQuery+Ajax实现表格数据不同列标题排序(为表格注入活力)

    jQuery+Ajax实现表格数据不同列标题排序(为表格注入活力)

    表格大家都十分熟悉,如今的CSS也使得表格的布局越来越光彩耀人.但是,无论如何,都掩饰不了那些包装下的死板. 那么如何让那些死板的数据 更具有可读性.可用性,能够让我们那些数据在"动"呢? 下面我们使用jquery+ajax 来为表格注入些活力.主要实现的目的就是:将表格的列标题转化为按钮,点击不同的列标题,便按相应的列对数据进行排序.比如学生信息表,我点击"生日"列,这张表便按生日排序将结果呈现在我们面前.使用ajax来调用本页也避免了刷新页面所带来的折磨. 下面

  • Vue2.0实现将页面中表格数据导出excel的实例

    这两天学习了Vue.js 感觉知识点挺多的,所以,今天添加一点小笔记. 项目中将后台返回的数据v-for到表格中,然后需要将这个表格导出为EXCEL 只说怎么做. 一.需要安装三个依赖: npm install -S file-saver xlsx npm install -D script-loader 二.项目中新建一个文件夹:(vendor---名字任取) 里面放置两个文件Blob.js和 Export2Excel.js. Blob.js和 Export2Excel.js文件下载地址:E

  • 基于jQuery实现表格数据的动态添加与统计的代码

    基于jQuery实现表格数据的动态添加与统计的代码

                                                              图(1.1)    某物流信息系统中的功能要求如图1.1所示,表格中每一行代表一笔运送货物的信息,在录入每行的计费重量和费率后,要求能按一定的公式,自动计算运送费用,并且能自动统计所有运送货物的总运费.运送货物信息的数据量(即表格的行数)不定,要求能动态增加.删除,即表格的数据行数是动态可维护的.同时为了方便操作,需要在页面中能像使用键盘的上下左右方向键,在录入的文本框之间进行切换

  • el表达式 写入bootstrap表格数据页面的实例代码

    el表达式 写入bootstrap表格数据页面的实例代码

    el表达式,写入bootstrap表格,简化代码,效果图: 不多说,上干货: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.

  • bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法

    异步请求 var postData = { "env_name" : new_env_name, "env_url": new_env_url, "env_desc" : new_env_desc }; $.ajax({ type: 'POST', url : '/test_env_add/', data : postData, dataType : 'json', success : function(data){ $('#table_test

  • jquery通过select列表选择框对表格数据进行过滤示例

    jquery通过select列表选择框对表格数据进行过滤 表格数据 复制代码 代码如下: <table id="example">    <thead>        <tr>            <th>Name</th>            <th>Surname</th>        </tr>    </thead>    <tbody>       

  • jQuery中ajax获取数据赋值给页面的实例

    实例如下所示: //html代码 <pre name="code" class="html"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="cityname" id="{$rr[code]}" name='{$rr[name]}'

  • python 获取页面表格数据存放到csv中的方法

    获取单独一个table,代码如下: #!/usr/bin/env python3 # _*_ coding=utf-8 _*_ import csv from urllib.request import urlopen from bs4 import BeautifulSoup from urllib.request import HTTPError try: html = urlopen("http://en.wikipedia.org/wiki/Comparison_of_text_edit

  • JQuery实现表格数据行上移与下移

    JQuery实现表格数据行上移与下移

    本文实例为大家分享了JQuery实现表格数据行上移与下移的具体代码,供大家参考,具体内容如下 效果展示 代码实现 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>Bootstrap 实例 - 条纹表格</title>     <link rel="stylesheet" href="https

随机推荐