`
Admin_king
  • 浏览: 4586 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

局部刷新的js分页插件

JavaScriptAjaxXHTML 
阅读更多

一个简单js分页插件,水平有限,大神勿喷. 大笑

 

（一）splitPage.js分页插件

直接copy就能使用：

/***
 * 功能:局部刷新分页显示表格内容
 * 作者:JML
 * 版本:1.0
 * 备注:自己封装的局部刷新分页插件,主要是想了解一下分页插件是如何运作的
 * 缺陷:水平有限,插件很不灵活,还有两个硬编码块
 * 建议:大家还是下载专门的js分页插件来进行使用吧(本代码可供参考)
*/

/**
 * 帮助文档:
 * 1.结合jQuery.js来进行使用
 * 2.提供了两个方法可供调用
 *  方法一:splitPage(tableID,tableHeadName,tableData,checkboxRow)
 *      参数详解[
 *          tableID:需要用户在jsp页面写一个空的表格并赋予id值
 *          tableHeadName:表头内容(格式如:["图书ID","图书名称","图书价格","入库时间"])
 *          tableData:数据源(后台查到的list集合[可以是json字符串][也可以是json字符串解析过后的对象数组])
 *          checkboxRow:boolean类型([true:表示显示多选框][false:不显示多选框])
 *      ]
 * 
 *  方法二:getCheckedBoxs()
 *      返回值详解[
 *          (null):表示用户没有选择任何一条记录
 *          (a):表示用户选择了一条记录
 *          (a,b,c..z):表示用户选择了多条记录
 *      ]
 *      友情提示[
 *          关于用户到底选择了一条还是多条,可以通过 indexOf(",")>0 来进行判断
 *          即:如果返回的字符串包含',',就表示有选择了多条记录
 *      ]
 * 3.关于硬编码块
 *  硬编码块-:initTableData()
 *      解释[
 *          水平有限,遍历集合数据时,只能按照JavaBean里面的属性顺序遍历
 *          有(不需要显示的字段)和(需要转换格式的字段),需要用户手动在本方法里面添加if块
 *          格式如下:
 *              if(filedName=="该字段名称")
 *              {
 *                  具体操作
 *                  continue;
 *              }
 *      ]
 *  硬编码块二:getBoxValue()
 *      解释[
 *          水平有限,获取用户选择的多选框时,把多选框的值拼成字符串返回
 *          默认是把 该多选框的下一个单元格内容的值 赋给多选框
 *          用户可以根据需求更改此块,格式如下:
 *          obj.parentNode.nextSibling.firstChild.nodeValue
 *         当前对象   父元素    下一个兄弟元素   第一个子元素   节点值
 *      ]
 * 
*/

/**
 * [用户可调用]分页方法
*/
function splitPage(tableID,tableHeadName,tableData,checkboxRow)
{
    initPageData(tableID,tableHeadName,tableData,checkboxRow);
}

/**
 * [不可调用]初始化页面方法(默认第一页,每页5条)
*/
function initPageData(tableID,tableHeadName,tableData,checkboxRow)
{
    var page=1;
    var pageSize=5;
    doSplitPage(tableID,tableHeadName,tableData,page,pageSize,checkboxRow); 
}

/**
 * [不可调用]真正分页方法
*/
function doSplitPage(tableID,tableHeadName,tableData,page,pageSize,checkboxRow)
{
    var listCount;
    var pageCount;
    if(typeof(tableData)=="string")
    {
        tableData=tableData.replace(/\%/g,"\""); 
        tableData=eval("("+tableData+")");
    }
    if(typeof(tableHeadName)=="string")
    {
        tableHeadName=tableHeadName.split(",");
    }
    listCount=tableData.length;
    pageCount=parseInt(listCount/pageSize) + (listCount%pageSize==0?0:1);
    showTableData(tableID,tableHeadName,tableData,listCount,page,pageSize,pageCount,checkboxRow);
}

/**
 * [不可调用]渲染 表格 方法
*/
function showTableData(tableID,tableHeadName,tableData,listCount,page,pageSize,pageCount,checkboxRow)
{
    var colspanCell=tableHeadName.length;
    $("#"+tableID+" tr").remove();
    initTableHead(tableID,tableHeadName,checkboxRow);
    initTableData(tableID,tableData,listCount,page,pageSize,pageCount,checkboxRow);
    initTableFoot(tableID,tableHeadName,tableData,listCount,page,pageSize,pageCount,colspanCell,checkboxRow);
}

/**
 * [不可调用]渲染 表头 方法
*/
function initTableHead(tableID,tableHeadName,checkboxRow)
{
    var initHeadLine="<tr>";
    if(checkboxRow.toString()=="true")
    {
        initHeadLine+='<td><input type="checkbox" id="parent" onclick="choiceBoxStatus(this);" /></td>';
    }
    for(var i=0;i<tableHeadName.length;i++)
    {
        initHeadLine+="<td>"+tableHeadName[i]+"</td>";
    }
    initHeadLine+="</tr>";
    $("#"+tableID).append(initHeadLine);
}

/**
 * [不可调用]渲染 表格数据 方法
*/
function initTableData(tableID,tableData,listCount,page,pageSize,pageCount,checkboxRow)
{
    var firstLine=parseInt((page-1)*pageSize);
    var lastLine=parseInt((page-1)*pageSize)+parseInt(pageSize);
    if(page==pageCount)
    {
        lastLine=firstLine+(listCount-((pageCount-1)*pageSize));
    }
    for(var i=firstLine;i<lastLine;i++)
    {
        var initDataLine="<tr>";
        if(checkboxRow.toString()=="true")
        {
            initDataLine+='<td><input type="checkbox" name="kid" onclick="getBoxValue(this);"/></td>';
        }
        for(var filedName in tableData[i]){
            if(filedName=="ctime")
            {
                var ctime=new Date(tableData[i][filedName]);
                var year = ctime.getFullYear();
                var month = ctime.getMonth()+1;//js从0开始取 
                var date = ctime.getDate(); 
                var hour = ctime.getHours(); 
                var minutes = ctime.getMinutes(); 
                var second = ctime.getSeconds();
                ctime=year+"年"+month+"月"+date+"日 "+hour+"时"+minutes +"分"+second+"秒";
                initDataLine+="<td>"+ctime+"</td>";
                continue;
            }
            initDataLine+="<td>"+tableData[i][filedName]+"</td>"; 
        }  
        initDataLine+="</tr>";
        $("#"+tableID).append(initDataLine);
    }
}

/**
 * [不可调用]渲染 表格尾行提示 方法
*/
function initTableFoot(tableID,tableHeadName,tableData,listCount,page,pageSize,pageCount,colspanCell,checkboxRow)
{
    tableData=JSON.stringify(tableData).replace(/\"/g,"\%");
    if(checkboxRow.toString()=="true")
    {
        colspanCell=parseInt(colspanCell+1);
    }
    var initFootLine="<tr><td colspan='"+colspanCell+"' align='center' id='tableFootInfo'></td></tr>";
    $("#"+tableID).append(initFootLine);
    var footInfoID="tableFootInfo";
    $("#"+footInfoID).append("<select id='tableSize' onchange='changeTableSize(\""+tableID+"\",\""+tableHeadName+"\",\""+tableData+"\",\""+page+"\",\""+pageSize+"\",\""+checkboxRow+"\");'><option value='5' "+(pageSize==5?"selected='selected'":"")+">每页5条</option><option value='10' "+(pageSize==10?"selected='selected'":"")+">每页10条</option><option value='15' "+(pageSize==15?"selected='selected'":"")+">每页15条</option></select>"+"&nbsp;&nbsp;&nbsp;&nbsp;");
    showFirstInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow);
    showPrevInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow);
    showNextInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow);
    showLastInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow);
    $("#"+footInfoID).append("&nbsp;&nbsp;&nbsp;&nbsp;"+"当前是"+page+"/"+pageCount+"页");
    $("#"+footInfoID).append("&nbsp;&nbsp;&nbsp;&nbsp;"+"共计"+listCount+"条数据");
}

/**
 * [不可调用]渲染 首页 方法
*/
function showFirstInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow)
{
    if(page!=1)
    {
        page=1;
        $("#"+footInfoID).append("<a href='JavaScript:void(0);' onclick='doSplitPage(\""+tableID+"\",\""+tableHeadName+"\",\""+tableData+"\",\""+page+"\",\""+pageSize+"\",\""+checkboxRow+"\");'>首页</a>");
    }else
    {
        $("#"+footInfoID).append("首页");
    }
}

/**
 * [不可调用]渲染 上一页 方法
*/
function showPrevInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow)
{
    if(page>1)
    {
        page=parseInt(page)-1;
        $("#"+footInfoID).append("<a href='JavaScript:void(0);' onclick='doSplitPage(\""+tableID+"\",\""+tableHeadName+"\",\""+tableData+"\",\""+page+"\",\""+pageSize+"\",\""+checkboxRow+"\");'>上一页</a>");
    }
    else
    {
        $("#"+footInfoID).append("上一页");
    }
}

/**
 * [不可调用]渲染 下一页 方法
*/
function showNextInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow)
{
    if(page<pageCount)
    {
        page=parseInt(page)+1;
        $("#"+footInfoID).append("<a href='JavaScript:void(0);' onclick='doSplitPage(\""+tableID+"\",\""+tableHeadName+"\",\""+tableData+"\",\""+page+"\",\""+pageSize+"\",\""+checkboxRow+"\");'>下一页</a>");
    }
    else
    {
        $("#"+footInfoID).append("下一页");
    }
}

/**
 * [不可调用]渲染 末页 方法
*/
function showLastInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow)
{
    if(page!=pageCount && pageCount!=0)
    {
        page=pageCount;
        $("#"+footInfoID).append("<a href='JavaScript:void(0);' onclick='doSplitPage(\""+tableID+"\",\""+tableHeadName+"\",\""+tableData+"\",\""+page+"\",\""+pageSize+"\",\""+checkboxRow+"\");'>末页</a>");
    }
    else
    {
        $("#"+footInfoID).append("末页");        
    }
}

/**
 * [不可调用]改变表格记录条数
*/
function changeTableSize(tableID,tableHeadName,tableData,page,pageSize,checkboxRow)
{
    page=1;
    pageSize=$("#tableSize").val();
    doSplitPage(tableID,tableHeadName,tableData,page,pageSize,checkboxRow);
}

/**
 * [不可调用]全选/全不选
*/
function choiceBoxStatus(obj)
{
    var boxs=document.getElementsByName("kid");
    for(var i=0;i<boxs.length;i++)
    {
        boxs[i].checked=obj.checked;
        getBoxValue(boxs[i]);
    }
}

/**
 * [不可调用]给多选框赋值
*/
function getBoxValue(obj)
{
    var boxValue=obj.parentNode.nextSibling.firstChild.nodeValue;
    obj.value=boxValue;
}

/**
 * [用户可调用]获取选择的多选框的id字符串
*/
function getCheckedBoxs()
{
    var boxs=document.getElementsByName("kid");
    var ids="";
    var boxIDS="";
    for(var i=0;i<boxs.length;i++)
    {
        if(boxs[i].checked)
        {
            boxIDS+=boxs[i].value+",";
        }
    }
    ids=boxIDS.substring(0, boxIDS.length-1);
    if(ids.length==0)
    {
        ids=null;
    }
    return ids;
}

/**
 * ---end---
*/

 

(二)使用帮助

本插件提供了两个方法可被调用

方法一:splitPage(tableID,tableHeadName,tableData,checkboxRow)
          核心方法:进行局部刷新分页

方法二:getCheckedBoxs()
          辅助方法:返回 用户所选择的记录id 拼成的字符串

splitPage　参数介绍：

参数 备注
tableID 需要用户在jsp页面写一个空的表格并赋予id值
tableHeadName 表头内容(格式如:[“图书ID”,”图书名称”])
tableData 数据源(后台查到的list集合)[可以是json字符串][也可以是json字符串解析过后的对象数组]
checkboxRow boolean类型:[true:表示显示多选框][false:不显示多选框]

getCheckedBoxs　返回值介绍：

返回值 备注
null 表示用户没有选择任何一条记录
a 表示用户选择了一条记录
a,b,c…z 表示用户选择了多条记录

提示:
关于用户到底选择了一条还是多条,可以通过 indexOf(“,”)>0 来进行判断
即:如果返回的字符串包含’,’,就表示有选择了多条记录

 

(三)使用案例

jsp页面代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="format" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>列表</title>

<!-- 调用jQuery.js -->
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.9.1.js"></script>
<!-- 调用splitPage.js -->
<script type="text/javascript" src="<%=request.getContextPath()%>/js/splitPage.js"></script>

<!-- 方法块 -->
<script type="text/javascript">

$(document).ready(function(){
    $.ajax({
        type:"post",
        url:"<%=request.getContextPath()%>/doList.action",
        data:{},
        dataType:"json",
        success:function(data)
        {
            var TableID="bookTable";
            var TableHeadName=["图书ID","图书名称","图书价格","入库时间"];
            var TableData=data;
            var CheckboxRow=true;

            splitPage(TableID,TableHeadName,TableData,CheckboxRow);
        }
    });
});

function insert()
{
    location.href="<%=request.getContextPath()%>/toAddPage.action";
}

function update()
{
    var result=getCheckedBoxs();
    if(result==null)
    {
        alert("请选择要修改的语句!");
    }else if(result.indexOf(",")>0)
    {
        alert("您选择了多条语句!");
    }else
    {
        location.href="<%=request.getContextPath()%>/toUpdatePage.action?id="+result;
    }
}

function del()
{
    var result=getCheckedBoxs();
    if(result==null)
    {
        alert("请选择要删除的语句!");
    }else if(result.indexOf(",")>0)
    {
        var pro=confirm("请问您是否要删除您选中的多条记录?");
        if(pro)
        {
            location.href="<%=request.getContextPath()%>/doDelAll.action?id="+result;
        }
    }else
    {
        var pro=confirm("请问您是否要删除该记录?");
        if(pro)
        {
            location.href="<%=request.getContextPath()%>/doDel.action?id="+result;
        }
    }
}
</script>

</head>

<body>
    <div>
        <input type="button" value="添加" onclick="insert();"/>
        <input type="button" value="修改" onclick="update();"/>
        <input type="button" value="删除" onclick="del();"/>
    </div>
    <table border="1" id="bookTable"></table>
</body>
</html>

 

欢迎大神指教!大笑

 

   截图效果如下 : 

 

 

 

  • 大小: 7.8 KB
  • 大小: 8.3 KB
0
顶
0
踩
分享到：
| SQLServer 性能优化
评论
2 楼 Admin_king 2016-07-04  
masuweng 写道
能截图看看效果吗
效果如上
1 楼 masuweng 2016-07-02  
能截图看看效果吗
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQueryPager(JQuery分页插件pagination实现Ajax分页)

    jQueryPager是一款轻量级的jQuery分页插件，它允许开发者通过Ajax无刷新的方式实现网页数据的分页加载。此插件名为`pagination`，在CSDN等技术交流平台上被广泛讨论和分享。 **1. jQuery与Ajax** jQuery是一个强大...

    简单GridView AJAX局部刷新分页例子

    “Pager(1)”可能是自定义的JavaScript函数，用于初始化分页插件。 #### 七、注意事项 - **数据库连接**：确保数据库连接字符串正确无误，并且Access数据库文件路径正确。 - **安全性**：直接使用`Request....

    基于BootStrap实现局部刷新分页实例代码

    3. bootstrap-paginator.min.js：这是一个专门为Bootstrap设计的分页插件，可以帮助我们轻松创建分页导航。 接下来，我们来看控制器代码。这里是一个ASP.NET MVC的示例，控制器中的`Comment`方法接收请求，处理分页...

    jQuery分页插件（实例详尽，简单易用

    1. 引入资源：首先，确保在项目中引入jQuery库和选定的分页插件文件，例如“jquery_pagination.js”。 2. HTML结构：在需要分页的位置，设置一个空的容器元素，如`&lt;div id="pagination"&gt;&lt;/div&gt;`。 3. 初始化插件：...

    22-09-02-066_JsonTable(X.PagedList.Mvc.Core分页插件)

    这种实现方式虽然入门容易，但是实现比较复杂的Ajax局部刷新，在与Jquery DataTables插件来说功能上就有些力有不殆了，需要开发者自定义JavaScript/Jquery来实现这些功能，这些与我们这些对JavaScript/Jquery做到...

    jquery分页插件jquery.pagination.js实现无刷新分页

    在介绍使用jquery分页插件jquery.pagination.js实现无刷新分页的知识点之前，首先要明确什么是分页插件，以及无刷新分页的概念。分页插件是一种用于在网页上实现内容分页展示的工具，它能够将大量数据或内容分成多页...

    JqueryGrid 无刷新分页

    当用户点击分页按钮时，jQueryGrid会发送一个包含当前页数和每页显示条数的请求到服务器，服务器根据这些参数返回对应的数据，然后jQueryGrid将新数据动态插入到表格中，实现页面内容的局部更新。 三、实现步骤 1. ...

    ajax无刷新分页jquery.pagination插件

    它通过创建后台与浏览器之间的异步通信，实现了页面的局部更新，避免了用户等待整个页面刷新的过程。 接着，我们来讨论**jQuery**，这是一个广泛使用的JavaScript库，简化了JavaScript的许多操作，包括DOM操作、...

    功能强大的ajax方式jQuery前端分页插件pagination.zip

    Ajax（异步JavaScript和XML）允许在不刷新整个页面的情况下与服务器交换数据并局部更新页面，使得用户界面更加动态和响应迅速。 分页插件的核心特性包括： 1. **自定义配置**：开发者可以根据项目需求定制分页的...

    JQuery Ajax 分页插件 jquery_paginator

    jQuery中的`.ajax()`方法是实现Ajax的核心，它允许异步发送HTTP请求到服务器获取数据，然后在客户端处理返回的数据，实现页面的局部刷新。 ### 3. `jquery_paginator`插件工作原理 `jquery_paginator`插件通过监听...

    Ajax 无刷新分页

    5. **更新DOM**：解析后的数据可以用于更新DOM树，实现页面的局部刷新。例如，用新获取的分页内容替换原有的表格数据。 6. **添加导航**：为了实现分页效果，还需要创建分页按钮，根据总页数和当前页动态调整其状态...

    jQuery插-pagination_分页插件.rar

    在这个过程中，开发者需要注意性能优化，比如使用局部渲染来减少DOM操作，以及利用Ajax异步请求避免页面刷新，提供更好的交互体验。此外，jQuery Pagination插件通常支持自定义样式，可以通过CSS来调整分页控件的...

    js分页控件 Tableview

    同时，为了优化性能，可以考虑使用异步加载数据，配合Ajax实现局部刷新，减少不必要的服务器负担。 总之，Tableview作为一款优秀的js分页控件，结合jQuery的强大功能，为开发者提供了便捷的数据分页解决方案。无论...

    springMVC+velocity实现仿Datatables局部刷新分页方法

    在本文中，我们将探讨如何使用SpringMVC和Velocity框架实现一个仿Datatables的局部刷新分页功能。这个方法适用于那些不希望使用Datatables插件，但仍然需要保持页面风格统一和避免查询参数在页面上回显的情况。 ...

    PHP、Smarty与jQuery Ajax 分页插件jquery.pager.js的使用

    它能够实现局部刷新，使得用户在不重新加载整个页面的情况下获取或提交数据。本文主要介绍如何利用PHP、Smarty模板引擎以及jQuery Ajax分页插件jquery.pager.js来实现动态分页功能。 #### 二、准备工作 1. **环境...

    jQuery+Ajax实现无刷新分页

    jquery.pagination.js是一个基于jQuery的分页插件。这个插件的主要目的是在页面内创建分页链接，从而允许用户通过点击这些链接来访问不同的数据页面，而无需重新加载整个页面。该插件提供了许多配置选项，允许开发者...

    ajax无刷新分页技术

    **Ajax无刷新分页技术详解** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器交换数据并局部更新页面，实现了用户界面的即时响应，...

    使用jquery实现的分页

    在本教程中，我们将深入探讨如何使用 `jQuery` 实现分页功能，特别是利用局部刷新来优化用户体验。 1. **理解分页原理**： 分页的基本思想是将大量数据分为多个部分（页），每次只加载一页，用户可以逐页浏览。...

    Ajax分页插件Pagination从前台jQuery到后端java总结

    通过使用Ajax分页插件Pagination，开发者可以将分页的便利性和用户体验提升到新的水平。接下来，我们将从前端技术到后端实现对Ajax分页插件Pagination的使用方法和技巧进行深入探讨。 ### 知识点概述 1. **Ajax...

Magicbox
Global site tag (gtag.js) - Google Analytics