jQuery、Ajax分页

1、效果预览

2、HTML代码

<div class="row">
    <div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12">
        <table class="table table-striped table-hover  table-bordered  bootstrap-datatable " id="TemplateTable">
            <thead>
                <tr>
                    <td>模板名称</td>
                    <td style="width: 400px;">短信内容</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
<div class="row" style="margin-top: 15px;">
   <div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12">
    <div style="font-size: 14px;">共<label style="color: #20A8D8; font-size: 14px;" id="pageCount">0</label>条记录</div>
   </div>
</div>
<div class="row">
    <div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12">
     <div id="MainContent_AspNetPager_Msg" class="paginator">
        <a style="margin-right: 5px; cursor: pointer;" href="javascript:void(0)" onclick="PageIndexClick(this)"  id="FirstPage" pageindex="1">首 页 </a>
      <a style="margin-right: 5px; cursor: pointer;" href="javascript:void(0)" onclick="PageIndexClick(this)" id="TopPage" pageindex="0">← 上一页</a>
      <span class="cpb" style="margin-right: 5px; cursor: pointer;" id="CurrenPageSize">1</span>
      <a style="margin-right: 5px; cursor: pointer;" href="javascript:void(0)" onclick="PageIndexClick(this)" id="NextPage" pageindex="0">→ 下一页</a>
      <a style="margin-right: 5px; cursor: pointer;" href="javascript:void(0)" onclick="PageIndexClick(this)" id="LastPage" pageindex="0"> 尾 页 </a>
     </div>
   </div>
</div>

3、JS代码

//载入短信模板内容-分页
function TemplateAjax() {
    $('#TemplateTable tbody tr').remove();//清空Table tbody
    AjaxPage(1, PageSize);
}

//当前页，显示条数
function AjaxPage(curpage, PageSize) {
    //省
    var ProvinceId = $('#MainContent_ddlsheng').val();
    //市
    var CityId = $('#MainContent_ddlshi').val();
    $.ajax({
        cache: false,
        url: "/ajaxpage/getajax.aspx?t=smsplateformtemplateajaxpage&ProvinceId=" + ProvinceId + "&CityId=" + CityId + "&CurPage=" + curpage + "&PageSize=" + PageSize + "&a=" + Math.random(),
        dataType: 'json',
        success: function (data) {
            if (data != null) {
                var str = '';
                for (var i in data["Data"]) {
                    var Content = data["Data"][i]["SmsTemplateContent"];
                    if (Content.length >= 60) {
                        Content = Content.substring(0, 60);
                    }
                    str += "<tr><td>" + data["Data"][i]["SmsTemplateName"] + "</td><td>" + Content + "</td><td><input type='button' value=' 删 除 ' class='btn btn-primary' onclick='TemplateDelete(" + data["Data"][i]["Id"] + ")'/></td></tr>";
                }
                $('#TemplateTable tbody').html(str);
                RecordCount = data["RecordCount"];
                $('#pageCount').html(RecordCount);

            }
        }
    })
}
//首页、上一页、下一页、尾页点击
function PageIndexClick(obj) {
    //当前第几页
    var CurrenPageSize = $('#CurrenPageSize').html();
    //id
    var type = $(obj).attr('id');
    //首页
    if (type == 'FirstPage') {
        CurrenPageSize = 1;
        AjaxPage(CurrenPageSize, PageSize);
        $('#CurrenPageSize').html('1');
    }
        //上一页
    else if (type == 'TopPage') {
        if (CurrenPageSize > 1) {
            CurrenPageSize = parseInt(CurrenPageSize) - 1;
        } else {
            CurrenPageSize = 1;
        }
        AjaxPage(CurrenPageSize, PageSize);
        $('#CurrenPageSize').html(CurrenPageSize);
    }
        //下一页
    else if (type == 'NextPage') {
        var size = parseInt(CurrenPageSize) + 1;
        var maxpage = RecordCount % PageSize == 0 ? parseInt(RecordCount / PageSize) : (parseInt(RecordCount / PageSize) + 1);
        if (size <= maxpage) {
            CurrenPageSize = parseInt(CurrenPageSize) + 1
        }
        AjaxPage(CurrenPageSize, PageSize);
        $('#CurrenPageSize').html(CurrenPageSize);
    }
        //尾页
    else if (type == 'LastPage') {
        CurrenPageSize = (RecordCount % PageSize == 0 ? parseInt(RecordCount / PageSize) : parseInt(RecordCount / PageSize) + 1);
        AjaxPage(CurrenPageSize, PageSize);
        $('#CurrenPageSize').html(CurrenPageSize);
    }
}

//删除模板
function TemplateDelete(id) {
    $.ajax({
        cache: false,
        url: "/ajaxpage/getajax.aspx?t=smsplateformtemplateajaxdelete&Id=" + id + "&a=" + Math.random(),
        dataType: 'json',
        success: function (data) {
            if (data != null) {
                alert(data['result']);
                AjaxPage(1, PageSize);
            }
        }
    });
}

4、C#后台代码

if(Request.QueryString["t"] == "smsplateformtemplateajaxpage")
            {
                try
                {
                    string ProvinceId = Request.QueryString["ProvinceId"];
                    string CityId = Request.QueryString["CityId"];
                    int CurPage = 1;//当前第几页
                    int.TryParse(Request.QueryString["CurPage"], out CurPage);
                    int PageSize = 5;//每页显示多少条数据
                    int.TryParse(Request.QueryString["PageSize"], out PageSize);

                    StringBuilder sb = new StringBuilder();
                    sb.Append(" 1=1 and (delete_flag IS NULL  OR  delete_flag=0)");
                    //省
                    if (ProvinceId != null && !string.IsNullOrEmpty(ProvinceId) && ProvinceId != "0")
                    {
                        sb.Append(string.Format(" and ProvinceId={0} ", ProvinceId.Trim()));
                    }
                    //市
                    if (!string.IsNullOrEmpty(CityId) && CityId != "0" && CityId != "null")
                    {
                        sb.Append(string.Format(" and CityId={0} ", CityId.Trim()));
                    }
                    PageArgs pageArgs = new PageArgs();
                    pageArgs.PageSize = PageSize;
                    pageArgs.PageIndex = CurPage;
                    pageArgs.TableName = "D_SMSTemplate";
                    pageArgs.PrimaryKey = "Id";
                    pageArgs.Fields = "";
                    pageArgs.Filter = sb.ToString();
                    pageArgs.Order = " create_time desc";
                    IList<SMSTemplateEntity> list = new SMSTemplateBLL().GetSMSTemplateAll(ref pageArgs);

                    List<Dictionary<string, object>> li = new List<Dictionary<string, object>>();
                    Dictionary<string, object> dic = new Dictionary<string, object>();
                    dic.Add("RecordCount", pageArgs.RecordCount);//总条数
                    dic.Add("Data", list);

                    JavaScriptSerializer serializer = new JavaScriptSerializer();
                    var result = serializer.Serialize(dic);
                    Response.Write(result);
                }
                catch
                {
                    Response.Write(null);
                }
            }