ローカルリフレッシュ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="";
    if(checkboxRow.toString()=="true")
    {
        initHeadLine+='';
    }
    for(var i=0;i""+tableHeadName[i]+"";
    }
    initHeadLine+="";
    $("#"+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"";
        if(checkboxRow.toString()=="true")
        {
            initDataLine+='';
        }
        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+=""+ctime+"";
                continue;
            }
            initDataLine+=""+tableData[i][filedName]+""; 
        }  
        initDataLine+="";
        $("#"+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="'"+colspanCell+"' align='center' id='tableFootInfo'>";
    $("#"+tableID).append(initFootLine);
    var footInfoID="tableFootInfo";
    $("#"+footInfoID).append("+tableID+"\",\""+tableHeadName+"\",\""+tableData+"\",\""+page+"\",\""+pageSize+"\",\""+checkboxRow+"\");'>+(pageSize==5?"selected='selected'":"")+">  5 +(pageSize==10?"selected='selected'":"")+">  10 +(pageSize==15?"selected='selected'":"")+">  15 "+"    ");
    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("    "+"   "+page+"/"+pageCount+" ");
    $("#"+footInfoID).append("    "+"  "+listCount+"   ");
}

/**
 * [    ]        
*/
function showFirstInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow)
{
    if(page!=1)
    {
        page=1;
        $("#"+footInfoID).append("+tableID+"\",\""+tableHeadName+"\",\""+tableData+"\",\""+page+"\",\""+pageSize+"\",\""+checkboxRow+"\");'>  のページ");
    }else
    {
        $("#"+footInfoID).append("  ");
    }
}

/**
 * [    ]         
*/
function showPrevInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow)
{
    if(page>1)
    {
        page=parseInt(page)-1;
        $("#"+footInfoID).append("+tableID+"\",\""+tableHeadName+"\",\""+tableData+"\",\""+page+"\",\""+pageSize+"\",\""+checkboxRow+"\");'> のページ");
    }
    else
    {
        $("#"+footInfoID).append("   ");
    }
}

/**
 * [    ]         
*/
function showNextInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow)
{
    if(page1;
        $("#"+footInfoID).append("+tableID+"\",\""+tableHeadName+"\",\""+tableData+"\",\""+page+"\",\""+pageSize+"\",\""+checkboxRow+"\");'> のページ");
    }
    else
    {
        $("#"+footInfoID).append("   ");
    }
}

/**
 * [    ]        
*/
function showLastInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow)
{
    if(page!=pageCount && pageCount!=0)
    {
        page=pageCount;
        $("#"+footInfoID).append("+tableID+"\",\""+tableHeadName+"\",\""+tableData+"\",\""+page+"\",\""+pageSize+"\",\""+checkboxRow+"\");'>  のページ");
    }
    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"kid");
    var ids="";
    var boxIDS="";
    for(var i=0;iif(boxs[i].checked)
        {
            boxIDS+=boxs[i].value+",";
        }
    }
    ids=boxIDS.substring(0, boxIDS.length-1);
    if(ids.length==0)
    {
        ids=null;
    }
    return ids;
}

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

(二)ヘルプの使用
このプラグインは、呼び出す2つの方法を提供します.
方法一:splitPage(tableID,tableHeadName,tableData,checkboxRow)          コア・メソッド:ローカル・リフレッシュ・ページング
方法2:getCheckedBox()          アシストメソッド:ユーザーが選択したレコードidを綴った文字列を返す
splitPageパラメータの説明:
パラメータ
コメント
tableID
ユーザーがjspページに空の表を書いてid値を与える必要がある
tableHeadName
ヘッダーの内容(形式は「図書ID」、「図書名」)
tableData
データソース(バックグラウンドで調べたlistセット)[json文字列であってもよい][json文字列解析後のオブジェクト配列であってもよい]
checkboxRow
booleanタイプ:[true:表示マルチ選択ボックス][false:非表示マルチ選択ボックス]
getCheckedBoxの戻り値の説明:
戻り値
コメント
null
ユーザーがレコードを選択していないことを示します.
a
ユーザーがレコードを選択したことを示します.
a,b,c…z
ユーザが複数のレコードを選択したことを示す
ヒント:ユーザーが1つまたは複数を選択したかについては、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" %>
span class="hljs-string">"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


"Content-Type" content="text/html; charset=UTF-8">



"text/javascript"</span> src=<span class="hljs-string">"<%=request.getContextPath()%>/js/jquery-1.9.1.js"</span>>

"text/javascript"</span> src=<span class="hljs-string">"<%=request.getContextPath()%>/js/splitPage.js"</span>>


"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;
        }
    }
}





    

        "button" value="  " οnclick="insert();"/>
        "button" value="  " οnclick="update();"/>
        "button" value="  " οnclick="del();"/>
    
    "1" id="bookTable">

結尾語
突然の衝動と百折不饶の粘り強い精神だけが生活ではなく、生活には妥協と忘却が含まれている.