JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现第1/2页

问题描述:

JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现 加上你的CSS完全可以与EXT媲美哦


复制代码 代码如下:

GroupText.js

        var totalCount;//总页
var userdata;//数据对象
    $(document).ready(function(){            

            
            if(ecid !=""){
             firstSearch(ecid);
            }

            $("#ddlCsList").change(function(){
             ecid = $.trim($("#ddlCsList").val());
             firstSearch(ecid);
            });

            $("#btnfirst").click(function(){
         firstSearch(ecid);
            });

            $("#btnnext").click(function(){
             nextSearch(ecid);
            });

            $("#btnpre").click(function(){
             preSearch(ecid);
            });

            $("#btnlast").click(function(){
             lastSearch(ecid);
            });

            $("#gotopg").click(function(){
             gotoSearch(ecid);
            });

        

});
//绑定数据
        function binddata(udata)
        {
         jpstr ="";//这样的目的是清空,很有用的一步

         var ds = udata.value;

                    if ((ds!= null) && (typeof(ds) == "object"))
                    {
                     //alert( ds.Rows[0].ItemName )
                     var c = ds.Rows.length;
                     var newarr = getdataarr(udata);
                     for(var k = 0; k<newarr.length;k++){

                            
                            var tmp = newarr[k];
                            jpstr +="<tr><td style=" BORDER-BOTTOM: 1px solid" style=" BORDER-BOTTOM: 1px solid"><IMG id ='"+ds.Rows[tmp].srId+"' onclick=showOrHide("+ds.Rows[tmp].srId+") style="CURSOR: hand" style="CURSOR: hand" src="Images/uuu.gif" src="Images/uuu.gif"><B>"+ds.Rows[tmp].ItemName+"</b></td></tr><tr><td>"
                            var jpstrA="";
                            for(var i=tmp; i<c; i++)
                            {

                             if(ds.Rows[tmp].ItemName == ds.Rows[i].ItemName ){
                                            jpstrA += getTrAndTdFirstByCWidth("dg_item","10%") +
                                                            ""+ds.Rows[i].ItemName + getTdNextByWidth("10%") +
                                                            ""+ds.Rows[i].SendMod + getTdNextByWidth("10%") +
                                                            ""+ds.Rows[i].RecvMod + getTdNextByWidth("12%") +
                                                            ""+getDateByFormat(ds.Rows[i].SendDate) + getTdNextByWidth("38%") +
                                                            ""+ds.Rows[i].SendMsg + getTdNextByWidth("10%") +
                                                            ""+ds.Rows[i].JfValue + getTdLastByWidth("10%") +
                                                            ""+getTextByStatus(ds.Rows[i].SendStatus) +
                                                            "" + getTrAndTdLast();
                                        }
                                }    

                                jpstr +=getTableHeadByWidth("100%",ds.Rows[tmp].srId) + jpstrA + getTableLast();

                                jpstr += "</td></tr>";

                        }
                        jpstr ="<table width=100%>"+jpstr+"</table>";

                            

                                document.getElementById("divcontent").innerHTML = jpstr;
                                //alert(jpstr);

                }
                else
                {
                    document.getElementById("divcontent").innerHTML = "";    
                }

}
showOrHide=function(ids){
            $("#tab"+ids).toggle();
            var imgName= $("#"+ids).attr("src");

                var wz = imgName.indexOf('.gif');
                var oldImg =imgName.substr(wz-3,3);

                if(oldImg=='uuu')//选择
                        $("#"+ids).attr("src","Images/eee.gif");
                else{
                    $("#"+ids).attr("src","Images/uuu.gif");

                    }

}
function getdataarr(udata){
var ds = udata.value;
            var resultArr= new Array();
            var dsstr='';
            for(var i=0; i<ds.Rows.length; i++){
                resultArr[i] = $.trim(ds.Rows[i].ItemName);
                if(dsstr=='')
                 dsstr =$.trim(ds.Rows[i].ItemName);
                 else
                 dsstr+='^%^'+$.trim(ds.Rows[i].ItemName)
            }

            splitStr(resultArr)

            var newArr = new Array();
            var temparr=dsstr.split('^%^')
            for(var k=0;k<resultArr.length;k++){
                for(var m=0;m<temparr.length;m++){
                    if(resultArr[k]==temparr[m]){
                        newArr[k]=m;
                        break;
                    }
                }
            }

            return newArr;
}
splitStr= function(oldarr){
                var nArr=oldarr;
                var isok=false;
                for(var l=0;l<nArr.length;l++){
                    for(var j=l+1;j<nArr.length;j++){
                    if(nArr[l]==nArr[j]){
                        nArr.splice(j,1);
                        isok=true;
                        }    
                }
            }

            if(isok)
                splitStr(nArr);

}
function getTextByStatus(status){
            if(status==0){
             return "<font color='blue'>启用</font>";
}else{
             return "<font color='red'><B>禁用</B></font>";
}
}
function getImgByStatus(status){
if(status==0){
return "../Images/gz2.gif";
}else{
return "../Images/gz1.gif";
}
}
function getTxtByStatus(status){
if(status==0){
return "我要禁用";
}else{
return "我要启用";
}
}
//第一页
        function firstSearch(ecid)
        {
         if (ecid != ""){
                 totalCount = Interactive.GetCmdSMSlogCount("1=1").value;
                    userdata = Interactive.PageingOpenCmdSMSLog(1,pageSize);//Interactive.getInteractiveSMSByEcid(ecid,pageSize,1,totalCount);

                    binddata(userdata);

                    $("#recordcount").html(totalCount.toString());//curpageindex
                    $("#curpageindex").html(totalCount==0?'0':1);
                    if (totalCount % pageSize ==0)
                    {
                     $("#pgcount").html((totalCount / pageSize).toString());
                    }else{
                     $("#pgcount").html(parseInt(totalCount / pageSize)+1);
                    }

                }
        }
    //下一页
        function nextSearch(ecid){
         if (ecid != ""){
         var curpg =$("#curpageindex").html();//得到当前页
         var pgCount = $("#pgcount").html();//得到总的页数
         if (curpg < pgCount){
                        totalCount = Interactive.GetCmdSMSlogCount('1=1').value;
                     userdata = Interactive.PageingOpenCmdSMSLog(parseInt(curpg)+1,pageSize);

                        binddata(userdata);
                        $("#recordcount").html(totalCount);//curpageindex
                        $("#curpageindex").html(parseInt(curpg)+1);
                        if (totalCount % pageSize ==0)
                        {
                        $("#pgcount").html(totalCount / pageSize);
                        }else{
                            $("#pgcount").html(parseInt(totalCount / pageSize)+1);
                        }
                    }else{
                     alert("当前已经是尾页了!");
                    }
                }
        }
    //上一页
        function preSearch(ecid){
         if (ecid != ""){
         var curpg =$("#curpageindex").html();//得到当前页
         var pgCount = $("#pgcount").html();//得到总的页数
         if (curpg > 1 ){
                        totalCount = Interactive.GetCmdSMSlogCount('1=1').value;
                     userdata = Interactive.PageingOpenCmdSMSLog(parseInt(curpg)-1,pageSize);
                        binddata(userdata);
                        $("#recordcount").html(totalCount);//curpageindex
                        $("#curpageindex").html(parseInt(curpg)-1);
                        if (totalCount % pageSize ==0)
                        {
                        $("#pgcount").html(totalCount / pageSize);
                        }else{
                            $("#pgcount").html(parseInt(totalCount / pageSize)+1);
                        }
                    }else{
                         alert("当前已经是首页了!");
                    }
                }
        }
        //尾页
        function lastSearch(ecid){
         if (ecid != ""){
         var curpg =$("#curpageindex").html();//得到当前页
         var pgCount = $("#pgcount").html();//得到总的页数
         if (curpg < pgCount ){
                        totalCount = Interactive.GetCmdSMSlogCount('1=1').value;
                     userdata = Interactive.PageingOpenCmdSMSLog(pgCount,pageSize);
                        binddata(userdata);
                        $("#recordcount").html(totalCount);//curpageindex
                        $("#curpageindex").html(pgCount);
                        if (totalCount % pageSize ==0)
                        {
                        $("#pgcount").html(totalCount / pageSize);
                        }else{
                            $("#pgcount").html(parseInt(totalCount / pageSize)+1);
                        }
                    }
                }

        }

        //跳转指定页
        function gotoSearch(ecid){
         if (ecid != ""){
         var curpg =$("#curpageindex").html();//得到当前页
         var pgCount = $("#pgcount").html();//得到总的页数
         var pggoto =$("#gototxt").val();
         var reg = /[^\d]/g;
                    if (($.trim(pggoto) != "") && !(reg.test(pggoto))){
                        if ((parseInt(curpg) != parseInt(pggoto)) && (pggoto <= pgCount)){
                            totalCount = Interactive.GetCmdSMSlogCount('1=1').value;
                            userdata = Interactive.PageingOpenCmdSMSLog(pggoto,pageSize);
                            binddata(userdata);
                            $("#recordcount").html(totalCount);//curpageindex
                            $("#curpageindex").html(pggoto);
                            if (totalCount % pageSize ==0)
                            {
                            $("#pgcount").html(totalCount / pageSize);
                            }else{
                                $("#pgcount").html(parseInt(totalCount / pageSize)+1);
                            }
                        }
                    }else{
                        alert("请输入正确的数字!");
                    }

                }

        }

        //刷新
        function Refresh(ecid){
         if (ecid != ""){
         var curpg =$("#curpageindex").html();//得到当前页

                    totalCount = Interactive.GetCmdSMSlogCount('1=1').value;
                    userdata = Interactive.PageingOpenCmdSMSLog(curpg);
                    binddata(userdata);
                    $("#recordcount").html(totalCount);//curpageindex
                    $("#curpageindex").html(curpg);
                    if (totalCount % pageSize ==0)
                    {
                    $("#pgcount").html(totalCount / pageSize);
                    }else{
                        $("#pgcount").html(parseInt(totalCount / pageSize)+1);
                    }

                    
                }

        }

复制代码 代码如下:

GroupText.aspx.cs:
private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
Ajax.Utility.RegisterTypeForAjax(typeof(DataAccess.Interactive));
}

复制代码 代码如下:

Interactive.cs:
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
        public DataTable PageingOpenCmdSMSLog(int pgindex,int pageSize)
        {
            int pageIndex=pgindex;
            DataTable dt = new DataTable ();
            JSONHelper json = new JSONHelper();
            int count = GetCmdSMSlogCount("1=1");
            dt = GetDataByPager2000("SendAndRecvData S left join InteractiveSMS I on (S.ItemId=I.Id AND S.ECID=I.ECID)","srId","1=1",pageSize,pageIndex,"srId",1,
                "S.srId,I.ItemName,S.SendMod,S.RecvMod,S.SendDate,S.SendMsg,S.JfValue,S.SendStatus",count);
            return dt;
        }

        [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
        public int GetCmdSMSlogCount(string where)
        {
            try
            {
                int count = ReturnSQL("select count(*) from SendAndRecvData S left join InteractCommand I on(S.ItemId=I.Id AND S.ECID=I.ECID) where "+where);
                return count;
            }
            catch (Exception)
            {

                throw;
            }
        }
        /// <summary>
        /// 分页获取数据列表 适用于SQL2000
        /// </summary>
        /// <param name="tablename">表名</param>
        /// <param name="key">主键</param>
        /// <param name="where">查询条件</param>
        /// <param name="pagesize">每页记录数</param>
        /// <param name="pageindex">页索引</param>
        /// <param name="orderfield">排序字段</param>
        /// <param name="ordertype">排序方式 1=ASC 0=DESC</param>
        /// <param name="fieldlist">查找的字段</param>
        /// <param name="recordcount">总记录数</param>
        /// <returns></returns>
        public static DataTable GetDataByPager2000(string tablename, string key, string where, int pagesize, int pageindex, string orderfield, int ordertype, string fieldlist, int recordcount)
        {
            string cmd = "ProcCustomPage";
            SqlParameter[] para = new SqlParameter[9];
            para[0] = new SqlParameter("@Table_Name", tablename);
            para[1] = new SqlParameter("@Sign_Record", key);
            para[2] = new SqlParameter("@Filter_Condition", where);
            para[3] = new SqlParameter("@Page_Size", pagesize);
            para[4] = new SqlParameter("@Page_Index", pageindex);
            para[5] = new SqlParameter("@TaxisField", orderfield);
            para[6] = new SqlParameter("@Taxis_Sign", ordertype);
            para[7] = new SqlParameter("@Find_RecordList", fieldlist);
            para[8] = new SqlParameter("@Record_Count", recordcount);

            return ExecuteDataSet(CommandType.StoredProcedure, cmd, para).Tables[0];

        }
        public static DataSet ExecuteDataSet(CommandType cmdType, string cmdText, params SqlParameter[] para)
        {
            try
            {
                using (SqlConnection con = new SqlConnection(CONN_STRING))
                {
                    SqlDataAdapter adapter = new SqlDataAdapter();

                    using (SqlCommand cmd = new SqlCommand())
                    {
                        DataSet ds = new DataSet();
                        PrepareCommand(con, cmd, cmdType, cmdText, para);
                        adapter.SelectCommand = cmd;
                        adapter.Fill(ds);

                        return ds;
                    }
                }
            }
            catch(Exception ex)
            {
                string d=ex.ToString();
                return null;
            }
        }
        /// <summary>
        /// 建立SqlCommand
        /// </summary>
        /// <param name="con">SqlConnection 对象</param>
        /// <param name="cmd">要建立的Command</param>
        /// <param name="cmdType">CommandType</param>
        /// <param name="cmdText">执行的SQL语句</param>
        /// <param name="cmdParms">参数</param>
        private static void PrepareCommand(SqlConnection con, SqlCommand cmd, CommandType cmdType, string cmdText, SqlParameter[] cmdParms)
        {
            if (con.State != ConnectionState.Open)
                con.Open();

            cmd.Connection = con;
            cmd.CommandType = cmdType;
            cmd.CommandText = cmdText;

            if (cmdParms != null)
                foreach (SqlParameter para in cmdParms)
                    cmd.Parameters.Add(para);
        }