js解析json添加到表格并分页

合集下载

js读取解析JSON数据

js读取解析JSON数据各位读友大家好！你有你的木棉，我有我的文章，为了你的木棉，应读我的文章！若为比翼双飞鸟，定是人间有情人！若读此篇优秀文，必成天上比翼鸟！js读取解析JSON数据js读取解析JSON数据JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。

同时，JSON是JavaScript 原生格式，这意味着在JavaScript 中处理JSON数据不须要任何特殊的API 或工具包。

本文主要是对JS操作JSON的要领做下总结。

在JSON中，有两种结构：对象和数组。

1. 一个对象以“{”（左括号）开始，“}”（右括号）结束。

每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间运用“,”（逗号）分隔。

名称用引号括起来；值如果是字符串则必须用括号，数值型则不须要。

例如：var o={“xlid”:”cxh”,”xldigitid”:123456,”topscore”:2000,”topplaytime”:”2009-08-20”}；2. 数组是值（value）的有序集合。

一个数组以“[”（左中括号）开始，“]”（右中括号）结束。

值之间运用“,”（逗号）分隔。

例如：var jsonranklist=[{“xlid”:”cxh”,”xldigitid”:123456,”topscore”:2000,”top playtime”:”2009-08-20”},{“xlid”:”zd”,”xldigitid”:123456,”topscore ”:1500,”topplaytime”:”2009-11-20”}];为了方便地处理JSON数据，JSON提供了json.js包，下载地址：/json.js在数据传输流程中，json是以文本，即字符串的形式传递的，而JS 操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。

JS处理数据实现分页功能

JS处理数据实现分页功能这⼏天有⼩伙伴讨论起了分页的相关问题，这⾥我也简单讲下前端如何简单便捷的利⽤Js（库）写出优雅，好⽤的分页⼯具。

分页是个很简单⼜超多接触的技术点，粗略来讲分如下两种：真分页——每次根据页码、页⼤⼩获取数据并展⽰。

假分页——⼀次性获取所有数据，根据页码、页⼤⼩展⽰。

公认⽐较好的做法是真分页，这样可以避免很多问题（如内存占⽤过多）。

有⼀点需要注意，单纯的前端是⽆法独⽴完成数据分页的（废话），所以后端⽀持是必须的。

作为⽀持，webapi除了返回所请求的数据，还应返回数据总量以便计算页数：如上图所⽰，我们可以看出数据总量27，分页⼤⼩10（这边只请求了10条数据）。

如果你拥有如上图的webapi的⽀持，就可以接着往下写了。

我使⽤对象字⾯量封装的⽅法：var Post = {Url: function () {return "webAPI路径";},///返回带分页信息//[ele]填充信息元素ID///[ele2]填充分页元素ID//[tagName]信息元素⼀级元素名///[tag2Name]信息元素⼆级元素名//[index]页码Pager: function (ele, ele2, tagName, tag2Name, index, where) {//页⼤⼩var size = $.cookie('pageSize') == undefined ? 10 : $.cookie('pageSize');//封装的AjaxLoad(Post.Url(), {参数列表}, function (data) {<br data-filtered="filtered"> //展⽰数据$(ele).html(createHtml(data.rows, tagName, tag2Name));//设置分页信息$(ele2).attr('index', index).attr('rowcount', size).attr('total', data.total);//填充分页PagerTool(ele, ele2, Post, tagName, tag2Name, where);});}}Load、createHtml和PagerTool是我⾃⼰封装的⼏个⽅法，代码如下：///公共加载⽅法//[turl]访问地址///[postData]提交数据(标准post格式)//[callback]回调函数(可匿名)function Load(turl, postData, callback) {jQuery.support.cors = true;try {$.ajax({url: turl,timeout: 10000,type: "post",data: postData,success: function (data) {if (data != null) {Json = eval("(" + data + ")");callback(Json);}}});} catch (e) {Mbox.Show(e.message);}}///创建Html结构//[data]数据源///[tagName]⼀级元素标签名称//[tag2Name]⼆级元素标签名称function createHtml(data, tagName, tag2Name) {var Html = '';for (var i = 0; i < data.length; i++) {Html += `<${tagName}>`;$.each(data[i], function (i, v) {Html += `<${tag2Name}>${v}</${tag2Name}>`;});Html += `</${tagName}>`;}return Html;}PagerTool⽅法：//公共分页⼯具条///[dataEle]数据主体//[ele]分页主体///[obj]被传⼊的类//[where]条件///[w]按照何种⽅式搜索function PagerTool(dataEle, ele, obj, tag1, tag2, where) {var total = $(ele).attr('total') - 0;var rowcount = $(ele).attr('rowcount') - 0;var index = $(ele).attr('index') - 0;var count = total % rowcount == 0 ? total / rowcount : Math.floor(total / rowcount) + 1;var Html = '';Html += '<p class="page">';Html += '<a href="javaScript:void(0)" class="prePage">上⼀页</a>';for (var i = 1; i <= count; i++) {if (index != i) {Html += `<a href="javaScript:void(0)" class="nowPage">${i}</a>`;} else {Html += `<a href="javaScript:void(0)" class="nowPage" style="background:#ACDDEA; color:#226F83; border:#93D3E4 1px solid;">${i}</a>`;}}Html += '<a href="javaScript:void(0)" class="nextPage">下⼀页</a>';Html += '</p>';$(ele).html('').html(Html);//上⼀页$(ele).find('a[class=prePage]').bind('click', function () {var index = $(this).parent().parent().attr('index') - 0;if (index > 1) {$(this).parent().parent().attr('index', index - 1);obj.Pager(dataEle, ele, tag1, tag2, index - 1, where);}});//下⼀页$(ele).find('a[class=nextPage]').bind('click', function () {var index = $(this).parent().parent().attr('index') - 0;if (index < count) {$(this).parent().parent().attr('index', index + 1);obj.Pager(dataEle, ele, tag1, tag2, index + 1, where);}});//当前页$(ele).find('a[class=nowPage]').bind('click', function () {var index = $(this).parent().parent().attr('index') - 0;$(this).parent().parent().attr('index', $(this).text());obj.Pager(dataEle, ele, tag1, tag2, $(this).text(), where);});}调⽤⽅式会是这样的：Post.Pager(testBox, pagerBox, 'ul', 'li', 1, `筛选数据的条件`);使⽤了如上代码，即可按照所返回的json数据的格式⾃动映射到容器内（按照传⼊的tagName⽣成dom）：切换后效果：分页⼯具条，⽣成在页⾯是这样的：<p class="page"><br data-filtered="filtered"> <a href="javaScript:void(0)" class="prePage">上⼀页</a><br data-filtered="filtered"> <a href="javaScript:void(0)" class="nowPage" style="background:#ACDDEA; color:#226F83; border:#93D3E4 1px solid;">1<到此这篇关于JS处理数据实现分页功能的⽂章就介绍到这了。

JavaScript的JSON处理

JavaScript的JSON处理JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端数据传输和存储。

在JavaScript中，JSON对象提供了一组用于解析和生成JSON数据的方法，使得开发者可以轻松地处理JSON数据。

一、JSON解析在JavaScript中，可以使用JSON对象的parse()方法将JSON字符串解析成JavaScript对象。

假设有一个名为jsonData的JSON字符串，可以通过以下方式解析：```javascriptvar jsonObj = JSON.parse(jsonData);```解析后的结果将赋值给jsonObj，开发者可以通过访问jsonObj的属性来获取其中的数据。

二、JSON生成与JSON解析相反，JSON对象的stringify()方法可以将JavaScript对象转换为JSON字符串。

假设有一个名为jsonData的JavaScript对象，可以通过以下方式生成JSON字符串：```javascriptvar jsonString = JSON.stringify(jsonData);```生成的JSON字符串将赋值给jsonString，可以用于数据传输和存储。

三、JSON操作除了解析和生成JSON数据，JavaScript的JSON对象还提供了一些其他的操作方法。

1. JSON.stringify()的参数除了接受一个JavaScript对象作为参数，JSON.stringify()方法还可以接受其他两个参数，用于控制生成的JSON字符串的格式。

第二个参数用于指定一个过滤器函数，可以选择性地包含或排除特定的属性。

```javascriptvar jsonData = {name: "John",age: 25,city: "New York"};var jsonString = JSON.stringify(jsonData, ["name", "age"]);// 结果：{"name":"John","age":25}```第三个参数用于控制缩进（indentation），可以设置为一个表示缩进字符的字符串，或者一个整数，表示缩进的空格数。

JS中Json数据的处理和解析JSON数据的方法详解

JS中Json数据的处理和解析JSON数据的⽅法详解JSON(JavaScript Object Notation) 是⼀种轻量级的数据交换格式。

它基于ECMAScript的⼀个⼦集。

JSON采⽤完全独⽴于语⾔的⽂本格式，但是也使⽤了类似于C语⾔家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。

这些特性使JSON成为理想的数据交换语⾔。

易于⼈阅读和编写，同时也易于机器解析和⽣成(⼀般⽤于提升⽹络传输速率)。

举个简单的例⼦：js 代码function showJSON() {var user ={"username":"andy","age":20,"info": { "tel": "123456", "cellphone": "98765"},"address":[{"city":"beijing","postcode":"222333"},{"city":"newyork","postcode":"555666"}]}alert(ername);alert(user.age);alert(.cellphone);alert(user.address[0].city);alert(user.address[0].postcode);}这表⽰⼀个user对象，拥有username, age, info, address 等属性。

同样也可以⽤JSON来简单的修改数据，修改上⾯的例⼦js 代码function showJSON() {var user ={"username":"andy","age":20,"info": { "tel": "123456", "cellphone": "98765"},"address":[{"city":"beijing","postcode":"222333"},{"city":"newyork","postcode":"555666"}]}alert(ername);alert(user.age);alert(.cellphone);alert(user.address[0].city);alert(user.address[0].postcode);ername = "Tom";alert(ername);}js 代码function showCar() {var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow");alert(carr.toJSONString());}function Car(make, model, year, color) {this.make = make;this.model = model;this.year = year;this.color = color;}可以使⽤eval来转换JSON字符到Objectjs 代码function myEval() {var str = '{ "name": "Violet", "occupation": "character" }';var obj = eval('(' + str + ')');alert(obj.toJSONString());}或者使⽤parseJSON()⽅法js 代码function myEval() {var str = '{ "name": "Violet", "occupation": "character" }';var obj = str.parseJSON();alert(obj.toJSONString());}下⾯使⽤prototype写⼀个JSON的ajax例⼦。

javascript解析json格式的数据方法详解

javascript解析json格式的数据⽅法详解JSON （JavaScript Object Notation）是⼀种简单的数据格式，⽐xml更轻巧。

它是 JavaScript 原⽣格式，这意味着在JavaScript 中处理 JSON 数据不需要任何特殊的 API 或⼯具包。

那么如何⽤JavaScript来解析json呢？⾸先，科普⼀下json。

在json中，有两种结构：对象和数组。

⼀个对象以“{”（左括号）开始，“}”（右括号）结束。

每个“名称”后跟⼀个“:”（冒号）；“‘名称/值' 对”之间运⽤ “,”（逗号）分隔。

名称⽤引号括起来；值如果是字符串则必须⽤括号，数值型则不须要。

例如：var o={“key”:”value”};数组是值（value）的有序集合。

⼀个数组以“[”（左中括号）开始，“]”（右中括号）结束。

值之间运⽤ “,”（逗号）分隔。

var array = [{“name”:”tom”},{“name”:”jake”}];在数据传输流程中，json是以字符串的形式传递的，⽽JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。

json字符串：var str='{“key”:”value”}';json对象：var o={“key”:”value”};1. json字符串转化为json对象可以通过JavaScript的eval()函数来进⾏解析，代码如下：<script type="text/javascript">var json = '{"key":"value","jian":"zhi"}';var obj = eval("(" + json + ")");console.log(obj); //控制台返回 Objectconsole.log(obj.key); //控制台返回 valueconsole.log(obj.jian); //控制台返回 zhi</script>或者通过JSON.parse（）⽅法来解析，代码如下：var json = '{"key":"value","jian":"zhi"}';var obj =JSON.parse(json);console.log(obj); //控制台返回 Objectconsole.log(obj.key); //控制台返回 valueconsole.log(obj.jian); //控制台返回 zhi既然这两种⽅法都可以解析json字符串，那么我们究竟使⽤哪种呢？在这之前，我们先来做⼀个测试：var value = 1;var jsonstr = '{"name":"jifeng","company":"taobao","value":++value}';var json1 = eval('('+jsonstr+')');console.log(json1); //控制台返回 Objectconsole.log('value: '+ value); //控制台返回 value 2我的天，evel⽅法竟然会执⾏json字符串⾥的代码！！我们再看⼀下JSON.parse()⽅法：var value = 1;var jsonstr = '{"name":"jifeng","company":"taobao","value":++value}';var json2 = JSON.parse(jsonstr);console.log(json2);console.log('value: '+ value);//控制台报错Unexpected token + in JSON at position现在知道怎么选择了吧。

如何在JavaScript中使用 JSON 格式

如何在JavaScript中使用 JSON 格式？JSON（JavaScript Object Notation）是一种数据交换格式，它使用文本以键值对的形式表示数据。

在JavaScript中，可以使用JSON.parse()将JSON字符串解析为JavaScript对象，使用JSON.stringify()将JavaScript对象转换为JSON字符串。

使用JSON的好处是它具有简单、轻量和易于理解的特点，同时它也是一种跨平台的格式，可以让不同的系统或应用程序之间共享数据。

在JavaScript中使用JSON的步骤如下：1.创建一个简单的JSON对象```javascriptvar person = {"name": "John","age": 30,"city": "New York"};```2.将JSON对象转换为字符串```javascriptvar jsonStr = JSON.stringify(person);console.log(jsonStr);//输出：{"name":"John","age":30,"city":"New York"} ```3.将JSON字符串解析为JavaScript对象```javascriptvar jsonObj = JSON.parse(jsonStr);console.log(jsonObj);//输出：{name: "John", age: 30, city: "New York"} ```在实际应用中，经常会遇到需要将数据从JavaScript对象转换为JSON字符串，或者从JSON字符串解析为JavaScript对象的情况。

【js读取解析JSON数据】js读取数据

【js读取解析JSON数据】js读取数据JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。

同时，JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不须要任何特殊的API或工具包。

在JSON中，有两种结构：对象和数组。

名称用引号括起来；值如果是字符串则必须用括号，数值型则不须要。

例如：varo={"xlid":"cxh","xldigitid":123456,"topscore":2000,"t opplaytime":"2009-08-20"}；2.数组是值（value）的有序集合。

一个数组以“[”（左中括号）开始，“]”（右中括号）结束。

值之间运用“,”（逗号）分隔。

例如：varjsonranklist=[{"xlid":"cxh","xldigitid":123456,"topsc ore":2000,"topplaytime":"2009-08-20"},{"xlid":"zd","xldigitid":123456,"topscore":1500,"toppl aytime":"2009-11-20"}];为了方便地处理JSON数据，JSON提供了json.js包，下载地址：https:///json.js在数据传输流程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。

jqGrid Table 纯Json自带分页

jqGrid Table纯Json自带分页分类：JAVASCRIPT OTHER2012-12-1116:35207人阅读评论(3)收藏举报[html]view plaincopyprint?1为了减轻数据库压力和提高加载速度，生成了纯JSON文件，想在本地自动分页，找了N多API均没有详细的介绍，在一次加载属性时加入了loadonce:true属性结果发现jqGrid自带的分页功能生效了。

哎，总算解决了问题。

官方的API不知是写的不够清楚，还是本人理解有问题，花费这么多时间在这个分页上面。

解决就好，遂与大家分享为了减轻数据库压力和提高加载速度，生成了纯JSON文件，想在本地自动分页，找了N 多API均没有详细的介绍，在一次加载属性时加入了loadonce:true属性结果发现jqGrid 自带的分页功能生效了。

哎，总算解决了问题。

官方的API不知是写的不够清楚，还是本人理解有问题，花费这么多时间在这个分页上面。

解决就好，遂与大家分享[html]view plaincopyprint?2<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">3<html xmlns="/1999/xhtml">4<head>567<title>本地数据测试</title>8<style type="text/css">9*{margin:0;padding:0;}10body{11font-size:12px;12}13</style>14<link href="css/ui.jqgrid.css"rel="Stylesheet"/>15<link href="css/redmond/jquery-ui-1.8.23.custom.css"rel="Stylesheet" />1617<script type="text/javascript"src="js/jquery.1.3.2.js"></script>1819<script type="text/javascript"src="js/grid.locale-cn.js"></script>20<script type="text/javascript"src="js/jquery.jqGrid.min.js"></script> 2122<script type="text/javascript">23$(document).ready(function(){24var colN,colM;25$.ajax({26type:"POST",27url:"./report_json/report_header_20121203164057.json",28data:"json",29success:function(response){//reponse-回发数据30//alert(response);31eval("var response="+response);32colN=response.colNames;//得到colNames33colM=response.colModel;//得到colModel3435$("#list1").jqGrid({36url:"./report_json/report_content_20121203164057.json", 37datatype:"json",38mtype:'GET',39height:300,40autowidth:true,41colNames:colN,42colModel:colM,43shrinkToFit:true,44//multiselect:true,45viewrecords:true,46sortable:true,47sortname:"id",48sortorder:"desc",49pager:"#pager1",50rowNum:3,51rowList:[15,30,60,90],52//grouping:true,53loadonce:true,//关键所在54userDataOnFooter:true,55buttonicon:'ui-icon-newwin'56,caption:"IBM Report"});5758/*.navGrid('#pager1',{edit:false,add:false,del:false})59//新增下载buttion60.navButtonAdd('#pager1',{61caption:"",title:"Export Excel",62buttonicon:"ui-icon-disk",63onClickButton:function(){64window.open('getjson.jsp?flag=down','downfile','width=300,height=130,toolba r=no,resizable=no,menubar=no,status=no');65//$.post("getjson.jsp",{flag:"1"},function(data){});66},position:"last"})6768*/697071}});72});73747576//重新载入jqgrid数据77function testquery(){78jQuery("#gridTable").setGridParam({page:1}).trigger("reloadGrid"); 79}80function testclear(){81jQuery("#list1").jqGrid('clearGridData');82}83</script>84</head>8586<body>8788<div id="gridPager">89<table id="list1"></table>90<div id="pager1"></div>91</div>92</body>93</html><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>本地数据测试</title><style type="text/css">*{margin:0;padding:0;}body{font-size:12px;}</style><link href="css/ui.jqgrid.css"rel="Stylesheet"/><link href="css/redmond/jquery-ui-1.8.23.custom.css"rel="Stylesheet"/><script type="text/javascript"src="js/jquery.1.3.2.js"></script><script type="text/javascript"src="js/grid.locale-cn.js"></script><script type="text/javascript"src="js/jquery.jqGrid.min.js"></script><script type="text/javascript">$(document).ready(function(){var colN,colM;$.ajax({type:"POST",url:"./report_json/report_header_20121203164057.json",data:"json",success:function(response){//reponse-回发数据//alert(response);eval("var response="+response);colN=response.colNames;//得到colNamescolM=response.colModel;//得到colModel$("#list1").jqGrid({url:"./report_json/report_content_20121203164057.json",datatype:"json",mtype:'GET',height:300,autowidth:true,colNames:colN,colModel:colM,shrinkToFit:true,//multiselect:true,viewrecords:true,sortable:true,sortname:"id",sortorder:"desc",pager:"#pager1",rowNum:3,rowList:[15,30,60,90],//grouping:true,loadonce:true,//关键所在userDataOnFooter:true,buttonicon:'ui-icon-newwin',caption:"IBM Report"});/*.navGrid('#pager1',{edit:false,add:false,del:false})//新增下载buttion.navButtonAdd('#pager1',{caption:"",title:"Export Excel",buttonicon:"ui-icon-disk",onClickButton:function(){window.open('getjson.jsp?flag=down','downfile','width=300,height=130,toolbar=no,resizable=no,menubar=no,status=no');//$.post("getjson.jsp",{flag:"1"},function(data){});},position:"last"})*/}});});//重新载入jqgrid数据function testquery(){jQuery("#gridTable").setGridParam({page:1}).trigger("reloadGrid"); }function testclear(){jQuery("#list1").jqGrid('clearGridData');}</script></head><body><div id="gridPager"><table id="list1"></table><div id="pager1"></div></div></body></html>[html]view plaincopyprint?提供一个简单的Demo地址：/detail/thl331860203/4873539提供一个简单的Demo地址：/detail/thl331860203/4873539。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><base href="<%=basePath%>"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><title>分页</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><script type="text/javascript">vartableData = [ {"C0" : "临夏州_康乐县","C1" : 190893.39,"C2" : 24544.65,"AREA_ID" : "930013005"}, {"C0" : "临夏州_永靖县","C1" : 368900.35,"C2" : 40592.19,"AREA_ID" : "930013006"}, {"C0" : "兰州市_东岗分局","C1" : 88.48,"C2" : 126.4,"AREA_ID" : "930013106"}, {"C0" : "临夏州_临夏县","C1" : 107337.9,"C2" : 20612.1,"AREA_ID" : "930013008"}, {"C0" : "临夏州_广河县","C1" : 69738.07,"C2" : 34894.44,"AREA_ID" : "930013003"}, {"C0" : "临夏州_和政县","C1" : 46622.96,"C2" : 20954.97,"AREA_ID" : "930013002"}, {"C0" : "临夏州_东乡县","C1" : 96021.84,"C2" : 16725.63,"AREA_ID" : "930013004"}, {"C0" : "临夏州_临夏市中心","C1" : 1845311.12,"C2" : 129478.93,"AREA_ID" : "930013001"}, {"C0" : "天水市_秦州区","C1" : 0,"C2" : 0,"AREA_ID" : "930013801"}, {"C0" : "临夏州_积石山","C1" : 256181.79,"C2" : 15185.98,"AREA_ID" : "930013007"}, {"C0" : "酒泉_肃州区","C1" : 264312,"C2" : 402.6,"AREA_ID" : "930013701"} ];var columns = [ {"cid" : "C0","ctext" : "区县"}, {"cid" : "C1","ctext" : "客户总收入"}, {"cid" : "C2","ctext" : "当月出账费用"} ];/**page:页码pageSize:每页的记录条数此方法除了传入page和pageSize之外，还应知道的有三个参数：一、表的全部数据，json串格式，可通过action查询数据库得到。

二、表头所对应的列的key及名称，也是json串格式三、表所对应的id注：此处只是适合表头只有一行，且事先写好的情况。

您可以根据需要改一下，逻辑思路就是这样，欢迎批评指正。

*/functionsplitPage(page, pageSize) {varptable = document.getElementById("page_table");varnum = ptable.rows.length;//table.rows返回表格中包含的所有行，此处假设表由表头1行和表体N行组成//alert(num);//清除tbodyfor ( vari = num - 1; i> 0; i--) {ptable.deleteRow(i);}vartotalNums = tableData.length;//总行数vartotalPage = Math.ceil(totalNums / pageSize);//总页数var begin = (page - 1) * pageSize;//页起始位置(包括)var end = page * pageSize;//页结束位置(不包括)end = end >totalNums ? totalNums : end;//向tbody中写入数据var n = 1;//tbody的起始行for ( vari = begin; i< end; i++) {var row = ptable.insertRow(n++);varrowData = tableData[i];for ( var j = 0; j <columns.length; j++) {var col = columns[j].cid;var cell = row.insertCell(j);varcellData = rowData[col];cell.innerHTML = cellData;}}//生成分页工具条varpageBar = "第" + page + "页/共" + totalPage + "页" + " ";if (page > 1) {pageBar += "<a href=\"javascript:splitPage(" + 1 + "," + pageSize+ ");\">首页</a> ";} else {pageBar += "首页";}if (page > 1) {pageBar += "<a href=\"javascript:splitPage(" + (page - 1) + ","+ pageSize + ");\">上一页</a> ";} else {pageBar += "上一页";}if (page <totalPage) {pageBar += "<a href=\"javascript:splitPage(" + (page + 1) + ","+ pageSize + ");\">下一页</a> ";} else {pageBar += "下一页";}if (page <totalPage) {pageBar += "<a href=\"javascript:splitPage(" + (totalPage) + ","+ pageSize + ");\">尾页</a> ";} else {pageBar += "尾页";}document.getElementById("page_bar").innerHTML = pageBar;}</script></head><body onload="splitPage(1,3);"><table id="page_table"><thead><tr><th>h1</th><th>h2</th><th>h3</th></tr></thead><tbody><tr><td>111</td><td>222</td><td>333</td></tr></tbody></table><div id="page_bar"></div></body></html>。