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

******************************************别墅图纸推荐*************************************************

我想有一栋别墅，面朝大海，春暖花开

龙兴科技别墅图纸设计，这里有最新最全的别墅图纸，

这里有最给力的别墅图纸折扣活动，图纸包括建筑图、结构图、给排水图、电气图

我们致力于为广大客户提供别墅设计图纸,图纸均由专业、经验丰富的设计团队设计，可免费提供施工技术指导

地址：http://bstzsj.taobao.com/