Bootstarp分页,每次项目都头疼的.再也不要重写了.复制下来重用

最新推荐文章于 2022-09-14 18:27:33 发布

走错路的程序员

最新推荐文章于 2022-09-14 18:27:33 发布

阅读量1.7k

点赞数

分类专栏： bootstarp

本文链接：https://blog.youkuaiyun.com/phker/article/details/48293319

版权

bootstarp 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个基于HTML和JavaScript的分页查询组件实现方案。该方案通过定义表单元素及按钮来实现页面间的跳转，并利用JavaScript进行页面索引的更新。支持自定义每页显示的记录数量和当前页数，同时提供了前往首页、上一页、下一页和末页的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<form method="post" class="form-inline">
            <input type="hidden" name="PageIndex" id="PageIndex" value="1" />
            <input type="hidden" name="PageSize" id="PageSize" value="20" />
 //其它查询条件也可以放进来,例如
  表名:<input type="text" name="TableName" value="@Request["TableName"]" />

 <button class="btn btn-default" id="btnQuery"><i class="fa fa-search"></i>查询</button>
 </form>

<ul class="pagination pagination-sm no-margin pull-right" id="pagination">
            @{
                int? RowCounts = (int?)ViewBag.RowCounts;

                int PageIndex = 0;
                int.TryParse(Request["PageIndex"], out PageIndex);

                int PageSize = 0;
                int.TryParse(Request["PageSize"], out PageSize);

                PageSize = PageSize == 0 ? 20 : PageSize;
                PageIndex = PageIndex == 0 ? 1 : PageIndex;
                RowCounts = RowCounts.HasValue ? RowCounts.Value : 1;
                int endPageIndex = (RowCounts.Value / PageSize);
                int toPageIndex = Math.Min(5, endPageIndex - PageIndex);
                int fromPageIndex = Math.Min(5,PageIndex);

                if (PageIndex > 1)
                 { 
                    <li class="paginate_button"><a href="javascript:gotoPage(1)">First</a></li> 
                    <li class="paginate_button"><a href="javascript:gotoPage(@(PageIndex-1))">Pre</a></li>
                 }

                for (int i = fromPageIndex - 1; i > 0; i--)
                {
                    <li class="paginate_button"><a href="javascript:gotoPage(@(PageIndex - i))">@(PageIndex - i)</a></li>
                }
                    <li class="paginate_button active">  <a href="javascript:void(0);">@(PageIndex)</a></li>

                for (int i = 1; i < toPageIndex; i++)
                {
                    <li class="paginate_button"><a href="javascript:gotoPage(@(PageIndex + i))">@(PageIndex + i)</a></li>
                }

                if (PageIndex < endPageIndex)
                {
                    <li class="paginate_button"><a href="javascript:gotoPage(@(PageIndex+1))">Next</a></li>
                }
                    <li class="paginate_button"><a href="javascript:gotoPage(@(endPageIndex))">End</a></li>
            }

        </ul>
        <script>
            function gotoPage(index) {
                //当然这里也可以换成ajax取数据.
                $("#PageSize").val(20);
                $("#PageIndex").val(index);
                $("#btnQuery").click();
            }
        </script>