• 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=" 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);
                    }
                }






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





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

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

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

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





    版权声明:本文博客原创文章,博客,未经同意,不得转载。

  • 相关阅读:
    bzoj 5028小Z的加油店(D12 序列gcd)(线段树+树状数组)
    蒲公英
    [APIO2012]派遣(可并堆)(D11)
    AT1219 歴史の研究(回滚莫队)
    [USACO05DEC] 布局
    小B的询问
    [HEOI2012]采花(树状数组)(暑假D11)
    [JLOI2011]飞行路线 (暑假D3 拆点+dijkstra堆优化)
    [POI2012]FES-Festival
    [国家集训队]拉拉队排练
  • 原文地址:https://www.cnblogs.com/mfrbuaa/p/4677088.html
Copyright © 2020-2023  润新知