datatable分页问题，谢谢各位，100分，解决问题继续加分

各位大侠
（这个问题我在网上找了2天都没有找到合适的）前台我用XMLHttpRequest接受来自后台传入的数据，后台我有datatable（因为需要必须使用datatable）绑定数据源并输出字符，
问题是如何分页传输？
比如前台页面发送abcdef.aspx?page=2&pagesize=10
后台获取page=2和pagesize=10后就输出数量为10，页数2的页面请问如何实现？谢谢各位！！

解决方案 »

  1.   

    不用datatable自己用js画或者（拼）表格<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Ajax实现数据的查看、修改、删除</title>   
        </head><body onload="getAllOfID()">
        <form >
            <div >
                <table>
                    <tr style="background-color:#fff5ee">
                        <td style="width: 80px">
                            <input id="btnBack" type="button" value="上一页" onclick="return btnBack_onclick()" />
                        </td>
                        <td style="width:80px">
                            <input id="btnNext" type="button" value="下一页" onclick="return btnNext_onclick()" />
                        </td>
                        <td style="width:160px">跳转到<input id="txtPageIndex" style="width: 60px" type="text" onkeypress="JudgeInput()" />页
                        </td>
                        <td style="width:100px">
                            <input id="ButtonJump" type="button" value="确定跳转" onclick="return ButtonJump_onclick()" />
                        </td>
                        <td><div id = "divPageNum" style="width:140px; background-color:#fff454"  >
                            </div>
                        </td>
                        <td>跳转到</td>
                        <td>
                            <select id="SelectPage" style="width: 61px"  onchange="SelectPageOnchange()" >
                                <option selected="selected"></option>
                            </select>
                        </td>
                    </tr>
                </table>
            
                <div> 
                    <table style="width:800px">
                        <thead id="Thead" style="background-color:#ffcc66">
                        </thead>
                        <tbody id="Tbody"  style="background-color:#ccffff">
                        </tbody>
                    </table>
                </div>
                <div id="divPageState">
                    <div id="divState" class="divFloatState" >fsf
                    </div>
                </div>
                
            </div>
            
            
            
               
        </form>
    </body>
    </html>
      

  2.   

    <script type ="text/javascript" >
            
        var arrAllId = new Array();
        var innerXmlHttp = null;
        
        var AllPages = 0;
        
        // 定义变量，设置每页显示数据条数
        var MaxItemsPerPage = 10;
        var XmlItems; 
        var ChangeIndex = 1;        
        //从数据库把关键子段的数据全部返回到一个数组中
        function getAllOfID()
        {
            //创建Dom
            var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
            xmlDoc.async = false;         
        
         //创建根节点
            var root=xmlDoc.createElement("root");         
            root.text = "getAllID";  
            xmlDoc.appendChild(root);
            xmlSend("GetInfo.aspx", xmlDoc,true, "getAllID") ;
        }
       
        function xmlSend(strURL, xmlDoc,bAysync, strCommand)
        {
            //创建了一个实例 MSXML2.XMLHTTP，该实例是一个 COM 对象，它为客户机与 HTTP 服务器的交互提供了一种方法。
            innerXmlHttp = new ActiveXObject("Msxml2.XMLHTTP.3.0");        //调用 Open 方法，向其传递三个参数："POST"、strURL（要请求的aspx页面）和 bAysync（表示使调用同步或同步）。
           innerXmlHttp.open("POST", strURL, bAysync);
            if(bAysync)
            {
                if(strCommand == "getAllID")
                innerXmlHttp.onreadystatechange = getAllIDhandleStateChange;
            else if(strCommand = "getItems")
                  innerXmlHttp.onreadystatechange = getItemshandleStateChange;
            }
           
            //使用 Send 方法将我们的请求发送到 HTTP 服务器
            innerXmlHttp.send(xmlDoc);
        }
        
        function getAllIDhandleStateChange()
            {
              //readyState返回当前请求的状态.
                //readyState == 4时,表示数据接收完毕,此时可以通过通过responseBody或responseText或responseXML获取完整的回应数据
                if (innerXmlHttp.readyState == 4) 
                {   
                    //接收数据
                    var xmlResult = innerXmlHttp.responseXML; 
                    
                    var root = xmlResult.documentElement;
                    
                    if(root.nodeName == "Err")
                        alert(root.text);
                    else
                    {
                        //解析xml，并把所有的itemId放到数组中
                        
                        var tableNodes = root.selectNodes("Table");
                        
                        var j = 1;                    
                        for(i = 0; i < tableNodes.length; i++ )                                
                        {
                            arrAllId[j] = tableNodes[i].text;
                            j++;             
                        }        
                        
                        AllPages = Math.ceil(arrAllId.length / MaxItemsPerPage);
                        document.getElementById("divPageNum").innerText ="总页数："  +  AllPages ;          
                        for(i = 0;i < AllPages;i++)   
                        {   
                           var opt = document.createElement("option");   
                           opt.text=i+1;   
                           opt.value=i;   
                           document.getElementById("SelectPage").add(opt);   
                        }                 
                    }                
                 }       
            }
            
        
        function getItemshandleStateChange()
        {
            //接收试题信息
             if (innerXmlHttp.readyState == 4) 
             {   
                //接收数据
                var xmlResult = innerXmlHttp.responseXML; 
                
                var root = xmlResult.documentElement;
                
                if(root.nodeName == "Err")
                    alert(root.text);
                else
                {
                    
                    var NodeItemInfo = root.selectNodes("//Table");
                                    
                    while(Tbody.rows.length > 0)
                    {
                        Tbody.deleteRow(0);
                    }
                    
                    for(i = 0;i < NodeItemInfo.length;i++)
                    {
                        var ItemID = NodeItemInfo[i].firstChild.text;                   
                        var ItemValue = NodeItemInfo[i].lastChild.text;                             
                        CreateRow(ItemID,ItemValue);                                      
                    }
                }
             }        
        }
            
            
        // 创建表中的的行
        function CreateRow(ID,Value)
        {       
            var row = Tbody.insertRow();        
            CreateCell(row,ID);
            CreateCell(row,Value);
            CreateCell(row,"<img src='pic/edit.gif' class='pic' onclick='Edit()' />");
            CreateCell(row,"<img src='pic/delete.gif' class='pic' onclick='Delete()' />");       
            
        }
        
        
        
        // 创建表格行中的列
        function CreateCell(row,Content)
        {
            var cell = row.insertCell();
            cell.innerHTML = Content;                      
        }
        
        
        // 当图片按钮被点击时执行编辑和删除命令
        // CommandName是图片传来的命令字符串
        function Edit()
        {
            var node = event.srcElement.parentNode.parentNode.sectionRowIndex;
            var ItemID = Tbody.rows[node].cells[0].innerText; 
            window.showModalDialog("QuestionAdd.aspx?ItemID="+ItemID,"试题浏览/修改","dialogHeight:500px;dialogWidth:820px");
            //return false;        
        }
        
        function Delete()
        {   
            var node = event.srcElement.parentNode.parentNode.sectionRowIndex;
            var ItemID = Tbody.rows[node].cells[0].innerText; 
            var ShowMsg = confirm("你确定要删除编号为："+ ItemID +" 的试题么？");
            Tbody.removeChild(Tbody.rows[node]);
        }
        
        
       
        
        
        // 当跳转按钮被点击时执行表页面的跳转
        function ButtonJump_onclick() 
        {
            var pageIndex = document.getElementById("txtPageIndex").value;
            
            ChangeIndex = pageIndex;
            
            JudgeUpAndDownDispaly();
            
            pageIndex = Math.round(pageIndex);    
            
            if(pageIndex <= 0 || pageIndex > AllPages)
            {
                alert("请输入合法数字!");
                return;
            }
            
            document.getElementById("txtPageIndex").value = pageIndex;
            
            // 调用方法执行表的翻页
            GetArrayItemInfo(pageIndex);
            
            //显示现在所在页数及总页数
            DispalyPageState();
                
        }
        
        
      

  3.   

    function JudgeUpAndDownDispaly()
        {
        
            if(ChangeIndex<=1)
            {
                document.getElementById("btnBack").disabled = true;
            }
            
            else 
                document.getElementById("btnBack").disabled = false;
            
            if(ChangeIndex>=21)
            {
                document.getElementById("btnNext").disabled = true;
            }
            
            else 
                document.getElementById("btnNext").disabled = false;    }
        
        // 如果表头已经存在，怎不再创建
        var flag = true;
        function CreateThead()
        {
            if(flag)
            {
                CreateTheadText()
                flag = false;
            }
        }
        
        // 创建表头
        function CreateTheadText()
        {
            var row = Thead.insertRow();
            CreateCell(row,"试题编号");
            CreateCell(row,"试题题干");
            CreateCell(row,"预览/修改");
            CreateCell(row,"删除");
        }
        
        
        
        // 根据得到的一组试题编号
        // 发送至后台，返回这些编号的详细内容
        function getItems(strIDs)
        {
          //创建Dom对象
            var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");        xmlDoc.async = false; 
        
            //创建根节点
            var root=xmlDoc.createElement("root");         
            root.text = "getItems";         
        
         var attr = xmlDoc.createAttribute("ids");
         attr.value = strIDs;
        
         root.setAttributeNode(attr);    
        
        
            xmlDoc.appendChild(root);
            
         // 发送xml文档 
            xmlSend("GetInfo.aspx", xmlDoc,true,"getItems") ;
            
        }
        
        
        // 下拉框菜单被选择时执行
        function SelectPageOnchange()
        {
            var SelectIndex = document.getElementById("SelectPage").selectedIndex;
            ChangeIndex = SelectIndex;
            GetArrayItemInfo(SelectIndex);
            JudgeUpAndDownDispaly();
            
            //显示现在所在页数及总页数
            DispalyPageState();
        }
        
        
        
        // 用来发送用户选择的页数，并返回相应的试题信息
        function GetArrayItemInfo(SelectIndex)
        {
            var FloorIndex = (SelectIndex-1) * MaxItemsPerPage + 1;
            var UpIndex = SelectIndex * MaxItemsPerPage;
            var strID = "";
            
            for(i = FloorIndex;i < UpIndex;i++)
            {
                strID += "'" + arrAllId[i] + "',";
            } 
            
            if (strID.length > 0)
            {    
                strID = strID.substring(strID, strID.length-1); //去掉最后一个','
                
                // 调用方法发送试题编号并得到放回的试题信息
                getItems(strID);
            }   
            
            // 调用方法创建表头
            CreateThead();
        }
        
       
        // 上一页按钮点击时触发的事件
        function btnBack_onclick() 
        {
            document.getElementById("btnNext").disabled = false;
            if(document.getElementById("txtPageIndex").blur())
            {
                var a = document.getElementById("txtPageIndex").value;
            }
            var a = document.getElementById("SelectPage").selectedIndex;
            ChangeIndex--
            if(ChangeIndex <= 1)
            {            
                ChangeIndex = 1;
                document.getElementById("btnBack").disabled = true;                       
            }   
            GetArrayItemInfo(ChangeIndex);
            
            //显示现在所在页数及总页数
            DispalyPageState();
        }
        
        
        
        // 下一页按钮点击时触发的事件
        function btnNext_onclick() 
        {
            
            document.getElementById("btnBack").disabled = false;
            ChangeIndex++;
            if(ChangeIndex >= AllPages)
            {
                ChangeIndex = AllPages;            
                document.getElementById("btnNext").disabled = true;            
            }   
            
            // 调用方法显示试题信息并执行翻页处理 
            GetArrayItemInfo(ChangeIndex)
            
            //显示现在所在页数及总页数
            DispalyPageState();
        }
        
        
        // 显示总页数和当前所处页数
        function DispalyPageState()
        {
            document.getElementById("divPageState").innerText ="当前页：" + ChangeIndex + "\t\t\t\t" + "总页数：" + AllPages;
            document.getElementById("txtPageIndex").value = "";
        }
        
        
        // 判断用户输入的内容，如果不是数字，则提示用户
        function JudgeInput()
        {
            if(event.keyCode < 48 || event.keyCode > 57)
            {
                event.keyCode = 0;
                alert("只允许输入数字！");
            }        
        }
        
        </script>我以前做考试系统的一个小例子，希望对你有帮助预祝国庆节快乐！~~
      

  4.   


     你的那个分页效果 AspNetPager 可以轻松搞定。 关于 AspNetPager 及用法，你可以在网上搜在一大堆
      

  5.   

    如果用GridView,想实现分页,则需要用DataSet做数据源.
    提示一下.