4.c#自定义控件之分页器PaginationControl

效果视图

请添加图片描述

属性设置

在这里插入图片描述
Page —当前页
PagerCount —按键数量
PageSize --每页数据条数
PageSizes --下拉框哪里,可以更改每页数据条数类型如10条每页,20条每页
Total 总数据数量

核心事件

在这里插入图片描述
当前页面变化时候触发paginationControl1_CurrentPageChanged
每页数量发送变化是触发paginationControl1_PageSizeChanged

        private void paginationControl1_CurrentPageChanged(object sender,PaginationEventArgs e)
        {
            Console.WriteLine(e.Value);
        }

        private void paginationControl1_PageSizeChanged(object sender, PaginationEventArgs e)
        {
            Console.WriteLine(e.Value);
        }

代码视图

在这里插入图片描述

源码下载

链接: 下载

一、AspNetPager支持两种方式分页: 一种是PostBack方式分页, 一种是通过Url来实现分页以及Url重写功能 二、AspNetPager支持各种数据绑定控件GridView、DataGrid、DataList、Repeater以及自定义的数据绑定控件分页功能十分强大。 三、AspNetPager分页控件本身并不显示任何数据,而只显示分页导航元素,数据在页面上的显示方式与该控件无关,所以需要手写数据连接方法来配合, 四、结合TOP 。。。NOT IN 的通用存储过程分页方法使用AspNetPager十分实用 测试控件datalist aspnetpager 的分页方法示例 分页方法为 PostBack 方式 1、 首先将AspNetPager.dll复制于应用程序下的bin目录,打开解决方案,引入dll文件 2、 在工具栏添加控件,这样可以支持拖拽使用 3、 要使用AspNetPager 要为其设置最基本的属性 使用 SqlServer Northwind数据库的 Products表 protected Wuqi.Webdiyer.AspNetPager AspNetPager1; protected System.Web.UI.WebControls.Label Label1; protected System.Web.UI.WebControls.DataList DataList1; private void Page_Load(object sender, System.EventArgs e) { this.AspNetPager1.PageSize=10; //设置每也显示的记录条数 if(!IsPostBack) //只在页面第一次加载时起作用 { SqlDBManager db = new SqlDBManager(System.Configuration.ConfigurationSettings.AppSettings["SqlConnectionString"]); AspNetPager1.RecordCount=db.CountPage("products");//获得要使用表的记录总数 //db.CountItems自定义的方法 this.BindData(); } } private void BindData() { SqlDBManager db= new SqlDBManager(System.Configuration.ConfigurationSettings.AppSettings["SqlConnectionString"].ToString(); DataList1.DataSource=db.FenPage(this.AspNetPager1.PageSize,this.AspNetPager1.CurrentPageIndex,"productid","products","productid,productname,unitprice,unitsinstock",""); //自定义方法由 TOP not in 存储过程分页方法改编 this.DataList1.DataBind(); //控件数据绑定 this.Label1.Text="当前第"+this.AspNetPager1.CurrentPageIndex+"页 总"+this.AspNetPager1.PageCount+"页"; } private void AspNetPager1_PageChanged(object sender, System.EventArgs e) { //页索引改变方法 this.BindData(); } 设计页效果 <asp:DataList id="DataList1" style="Z-INDEX: 101; LEFT: 296px; POSITION: absolute; TOP: 96px" runat="server"> <HeaderTemplate> <table border='1'> <tr> <td>产品ID</td> <td>产品名称</td> <td>产品数量</td> <td>产品单价</td> </tr> </HeaderTemplate> <FooterTemplate> </table> </FooterTemplate> <ItemTemplate> <tr> <td><%# DataBinder.Eval(Container.DataItem,"Productid")%></td> <td><%# DataBinder.Eval(Container.DataItem,"productname")%></td> <td><%# DataBinder.Eval(Container.DataItem,"unitprice")%></td> <td><%# DataBinder.Eval(Container.DataItem,"unitsinstock")%></td> </tr> </ItemTemplate> </asp:DataList> <webdiyer:AspNetPager id="AspNetPager1" style="Z-INDEX: 102; LEFT: 256px; POSITION: absolute; TOP: 40px" runat="server" Width="500px" FirstPageText="首页" LastPageText="尾页" NextPageText="下一页" PrevPageText="上一页" Height="40px" NumericButt PagingButt ShowNavigati ShowInputBox="Always" TextAfterInputBox="页" TextBeforeInputBox="跳转到第" AlwaysShow="True"> </webdiyer:AspNetPager> <asp:Label id="Label1" style="Z-INDEX: 103; LEFT: 120px; POSITION: absolute; TOP: 56px" runat="server">Label</asp:Label>
分页是一个常见的 UI 控件,用于展示数据的分页情况,并提供翻页操作。在 Vue ,我们可以通过自定义组件的方式来实现分页。下面是一个简单的分页组件示例: ```vue <template> <div class="pagination"> <button :disabled="currentPage === 1" @click="prevPage">上一页</button> <span class="page-num">{{ currentPage }} / {{ totalPages }}</span> <button :disabled="currentPage === totalPages" @click="nextPage">下一页</button> </div> </template> <script> export default { props: { currentPage: { type: Number, required: true }, totalPages: { type: Number, required: true } }, methods: { prevPage() { if (this.currentPage > 1) { this.$emit('page-change', this.currentPage - 1); } }, nextPage() { if (this.currentPage < this.totalPages) { this.$emit('page-change', this.currentPage + 1); } } } } </script> <style scoped> .pagination { display: flex; justify-content: center; align-items: center; margin-top: 20px; } button { margin: 0 10px; padding: 5px 10px; border-radius: 5px; border: none; background-color: #007aff; color: #fff; cursor: pointer; } button:disabled { opacity: 0.5; cursor: not-allowed; } .page-num { font-size: 16px; font-weight: bold; margin: 0 10px; } </style> ``` 在这个示例,我们定义了两个 props:currentPage 和 totalPages,分别表示当前页和总页数。组件包含上一页、下一页按钮和页码信息。通过点击按钮来触发 page-change 事件,从而更新父组件的 currentPage 值,实现翻页操作。 使用该组件时,只需在父组件传入 currentPage 和 totalPages 值,并监听 page-change 事件即可: ```vue <template> <div> <div v-for="item in items">{{ item }}</div> <pagination :current-page="currentPage" :total-pages="totalPages" @page-change="handlePageChange" /> </div> </template> <script> import Pagination from './Pagination.vue'; export default { components: { Pagination }, data() { return { items: ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'], currentPage: 1, totalPages: 2 } }, methods: { handlePageChange(page) { this.currentPage = page; } } } </script> ``` 这里只是一个简单的分页示例,实际开发还可以根据需求进行扩展,例如添加页码输入框、每页显示条数控制等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱搞事的程小猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值