如何用javascript进行分页

Question

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" id="tab1">
  <tr> 
    <td>
        <table class="datalist" id="tab">
          <tr class="celtitle">
    <td>省分公司</td>
    <td>问题反馈数量</td>
    <td>未处理的问题反馈数量</td>
    <td>自注册店员数量</td>
    <td>未处理的自注册店员数量</td>
    <td>人工销量确认数量</td>
    <td>未处理的人工销量确认数量</td>
    <td>活动数量</td>
    <td>提前终止的活动数量</td>  </tr>
 <%if(list==null||list.size()==0){ %>
  <tr class="celdata">
    <td colspan="4" nowrap class="centerdata">该条件下没有符合要求的数据</td>
  </tr>
  <%}else{ 
 
  for(int i=0;i<list.size();i++){
  
              StaffCouponStruct value=list.get(i);
  %>                <tr class="celdata" onmouseover="this.className='mouseM'" onmouseout="this.className='celdata'">
<td class="leftdata"><%=value.regionName%></td>
<td class="leftdata"><%=value.questCount%></td>
<td class="leftdata"><%=Integer.parseInt(value.questCount)-Integer.parseInt(value.ansCount)%></td>
<td class="leftdata"><%=value.allStaff%></td>
<td class="leftdata"><%=value.notStaff%></td>
<td class="leftdata"><%=value.allStaffSale%></td>
<td class="leftdata"><%=value.notStaffSale%></td>
<td class="leftdata"><%=value.allAction%></td>
<td class="leftdata"><%=value.errorAction%></td>


</tr>
 <%

 } %>
  <%} %></table>
</td>
</tr> 
</table>sql语句每次只能查出一条记录，所以用了一个list，到前台后循环得到 数据在table中，
如何用javascript编写一个分页

Answer 1

前几天刚写的一个，代码比较粗超就是了
 $.ajax({
                type: "post",
                url: "tracking.aspx/GetOriAwb",
                data: "{'ids':'" + escape(ids.join()) + "','pageIndex':" + pageIndex + ",'pageLimit':" + pageLimit + ",'customer':'" + customer  + "','blno':'" + blno + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    jsonData = eval(data.d)[0];
                    totalPage = Math.ceil(jsonData.total / pageLimit);
                    $('#total').text('共' + jsonData.total + '條記錄 ' + totalPage + '頁');
                    if (pageIndex === totalPage) {
                        $('#nextpage').attr('disabled', 'disabled');
                    } else {
                        $('#nextpage').attr('disabled', '');
                    }
                    if (pageIndex === 1) {
                        $('#prepage').attr('disabled', 'disabled');
                    } else {
                        $('#prepage').attr('disabled', '');
                    }
                    $.each(jsonData.data, function (index, item) {
                        rowHtml = new Array();
                        item.AWB_NO = item.AWB_NO === null ? '' : item.AWB_NO;
                        rowHtml.push('<tr>');
                        rowHtml.push('<td align="center" bgcolor="#FFFFFF">' + (index + 1) + '</td>');
                        rowHtml.push('<td align="center" bgcolor="#FFFFFF"><a target="_blank" href=AWBTracking.aspx?waybill=' + (item.AWB_NO || '') + '>' + item.DEL_NO + '</a></td>');
                        rowHtml.push('<td width="24%" bgcolor="#FFFFFF">' + (item.CUSTOM_NO || '') + '</td>');
                        rowHtml.push('<td align="right" bgcolor="#FFFFFF">' + item.CW + 'kg</td>');
                        rowHtml.push('<td align="center" bgcolor="#FFFFFF">' + item.PKG + '</td>');
                        rowHtml.push('<td align="center" bgcolor="#FFFFFF">' + (item.COMDTY_NAME || '') + '</td>');
                        rowHtml.push('<td align="center" bgcolor="#FFFFFF">' + (item.CREATE_DATE || '') + '</td>');
                        rowHtml.push('<td align="center" bgcolor="#FFFFFF">' + (item.STN || '') + '</td>');
                        rowHtml.push('<td align="center" bgcolor="#FFFFFF">' + (item.STATUS || '') + '</td>');
                        rowHtml.push('</tr>');
                        $('#grid tr:eq(' + (rownum++ - 1) + ')').after(rowHtml.join(''));
                    });
                },
                error: function (err) {
                    alert(err);
                }
            });
        }
后台是用C#写的        [WebMethod]
        public static string GetOriAwb(string ids, int pageIndex, int pageLimit, string customer,string blno)
        {
            ids = System.Web.HttpUtility.UrlDecode(ids);
            string condition = "1=1";
            //散客的話，至少要有填寫提單號碼或者原始訂單號碼
            if (string.IsNullOrEmpty(customer) && string.IsNullOrEmpty(ids) && string.IsNullOrEmpty(blno))
                return "[{total:0,data:[]}]";            if (!string.IsNullOrEmpty(ids))
            {
                condition += string.Format(" AND DEL_NO IN({0})", ids);
            }            if (!string.IsNullOrEmpty(customer))
            {
                condition += string.Format(" AND CUSTOM_NO='{0}'", customer);
            }
            //if (!string.IsNullOrEmpty(dfrom))
            //{
            //    condition += string.Format(" AND CREATE_DATE>='{0}'", dfrom);
            //}
            //if (!string.IsNullOrEmpty(dto))
            //{
            //    condition += string.Format(" AND CREATE_DATE<='{0}'",dto);
            //}
            if (!string.IsNullOrEmpty(blno))
            {
                condition += string.Format(" AND AWB_NO='{0}'", blno);
            }
            string table = "(SELECT T1.*,T2.AWB_NO,(select b.re from ehu_awb a,ehu_statcode b where a.awb_no=t2.awb_no and a.goods_status=b.code) status FROM ORI_AWB T1 LEFT JOIN EHU_AWBPKG T2 ON T1.DEL_NO=T2.CTN_NO)";            string sql =  string.Format("SELECT COUNT(*) FROM {0} WHERE {1}", table, condition);
            int total = Database.GetValueAsInt(sql);            if (total == 0)
                return "[{total:0,data:[]}]";
            DataTable dt = Query(table, "*", condition, "DEL_NO", "DESC", pageIndex, pageLimit);                
            IList<OriBl> list = EntityCovertor.ConvertToModelListFromDT<OriBl>(dt);
            JavaScriptSerializer jsSeri = new JavaScriptSerializer();
            string jsonStr = string.Format("[{{total:{0},data:{1}}}]", total, jsSeri.Serialize(list));
            return jsonStr;
        }        public static DataTable Query(string table, string fields, string condition, string orderByField, string orderByType, int pageIndex, int pageSize)
        {
            fields = string.IsNullOrEmpty(fields) ? "*" : fields;
            StringBuilder stringBuilder = new StringBuilder();
            stringBuilder.AppendFormat("SELECT {0} FROM (SELECT ROW_NUMBER()OVER(ORDER BY {1} {2}) TEMP_ROW_NUM,T1.{0} FROM {3} T1 ", fields, orderByField, orderByType, table);
            if (!string.IsNullOrEmpty(condition))
                stringBuilder.AppendFormat("WHERE {0} ", condition);
            stringBuilder.AppendFormat(") WHERE TEMP_ROW_NUM BETWEEN (({0}-1)*{1})+1 AND {0}*{1}", pageIndex, pageSize);
            return Database.GetDataTable(stringBuilder.ToString(), new string[] { });
        }

Answer 2

整体就是用jquery的ajax，传递分页的条件，后台接收条件，调用分页的SQL方法，返回datatable后，转换为list<model>这样的，然后序列化为json对象。在前台通过$.each(jsonData.data, function (index, item) {这样追加一行一行。

Answer 3

没有，但是你找下jquery对应的JAVA 服务器端的接收方法规格，就差不多，只是类库提供的不一样而已。我想语法相差不大。