局部刷新的js分页插件

最新推荐文章于 2024-05-11 21:58:00 发布

dwl假行僧

最新推荐文章于 2024-05-11 21:58:00 发布

阅读量3.7k

点赞数

分类专栏： JavaScript 文章标签：插件 javascript js分页插件局部刷新 jsp

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

（一）splitPage.js分页插件

直接copy就能使用

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

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

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

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

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

/**
 * [不可调用]渲染 表格 方法
*/
function showTableData(tableID,tableHeadName,tableData,listCount,page,pageSize,pageCount,checkboxRow)
{
    var colspanCell=tableHeadName.length;
    $(<span class="hljs-string">"#"</span>+tableID+<span class="hljs-string">" tr"</span>).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=<span class="hljs-string">"<tr>"</span>;
    <span class="hljs-keyword">if</span>(checkboxRow.toString()==<span class="hljs-string">"true"</span>)
    {
        initHeadLine+=<span class="hljs-string">'<td><input type="checkbox" id="parent" οnclick="choiceBoxStatus(this);" /></td>'</span>;
    }
    <span class="hljs-keyword">for</span>(var i=<span class="hljs-number">0</span>;i<tableHeadName.length;i++)
    {
        initHeadLine+=<span class="hljs-string">"<td>"</span>+tableHeadName[i]+<span class="hljs-string">"</td>"</span>;
    }
    initHeadLine+=<span class="hljs-string">"</tr>"</span>;
    $(<span class="hljs-string">"#"</span>+tableID).append(initHeadLine);
}

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

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

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

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

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

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

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

/**
 * [不可调用]全选/全不选
*/
function choiceBoxStatus(obj)
{
    var boxs=document.getElementsByName(<span class="hljs-string">"kid"</span>);
    <span class="hljs-keyword">for</span>(var i=<span class="hljs-number">0</span>;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(<span class="hljs-string">"kid"</span>);
    var ids=<span class="hljs-string">""</span>;
    var boxIDS=<span class="hljs-string">""</span>;
    <span class="hljs-keyword">for</span>(var i=<span class="hljs-number">0</span>;i<boxs.length;i++)
    {
        <span class="hljs-keyword">if</span>(boxs[i].checked)
        {
            boxIDS+=boxs[i].value+<span class="hljs-string">","</span>;
        }
    }
    ids=boxIDS.substring(<span class="hljs-number">0</span>, boxIDS.length-<span class="hljs-number">1</span>);
    <span class="hljs-keyword">if</span>(ids.length==<span class="hljs-number">0</span>)
    {
        ids=null;
    }
    <span class="hljs-keyword">return</span> ids;
}

/**
 * ---end---
*/</code>

(二)使用帮助

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

方法一: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页面代码：

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

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

<!-- 方法块 -->
<script type=<span class="hljs-string">"text/javascript"</span>>

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

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

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

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

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

</head>

<body>
    <div>
        <input type=<span class="hljs-string">"button"</span> value=<span class="hljs-string">"添加"</span> οnclick=<span class="hljs-string">"insert();"</span>/>
        <input type=<span class="hljs-string">"button"</span> value=<span class="hljs-string">"修改"</span> οnclick=<span class="hljs-string">"update();"</span>/>
        <input type=<span class="hljs-string">"button"</span> value=<span class="hljs-string">"删除"</span> οnclick=<span class="hljs-string">"del();"</span>/>
    </div>
    <table border=<span class="hljs-string">"1"</span> id=<span class="hljs-string">"bookTable"</span>></table>
</body>
</html></code>

结束语

光有骤然而至的冲动和百折不饶的顽强精神还不是生活，生活还包括了妥协和忘却。

dwl假行僧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
局部刷新的js分页插件

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

扫一扫