基于jQuery ligerUI实现分页样式

这里是基于jQuery ligerUI实现分页样式的完整攻略，分为以下步骤：

1. 引入依赖和样式文件

首先，在HTML文件中引入jQuery和ligerUI的JS文件和CSS文件。

<link href="path/to/ligerui/css/ligerUI-all.css" rel="stylesheet" type="text/css" />
<script src="path/to/jquery/jquery.min.js" type="text/javascript"></script>
<script src="path/to/ligerui/js/ligerUI.min.js" type="text/javascript"></script>

2. 编写分页组件的HTML结构

在HTML文件中，创建一个分页组件的容器，并在其中添加需要显示的元素。

<div id="pager">
   <ul class="l-page">
      <li class="l-first"></li>
      <li class="l-prev"></li>
      <li class="l-next"></li>
      <li class="l-last"></li>
      <li class="l-bar"></li>
   </ul>
</div>

3. 初始化分页组件

在JS文件中，使用ligerUI的pagination函数初始化分页组件，并设置相应的参数和事件。

$('#pager').pagination({
   pageSize: 10, //每页显示的记录数
   total: 100, //总记录数
   onPageChanged: function (page) {
      //分页事件处理
   }
});

4. 实现分页事件处理

在onPageChanged函数中，根据当前页数和每页显示的记录数，从后台获取相应的数据，并将数据显示在页面上。

var loadData = function (pageIndex) {
   var pageSize = 10;
   //请求后台数据
   $.ajax({
      url: 'path/to/data',
      type: 'GET',
      data: {
         pageIndex: pageIndex,
         pageSize: pageSize
      },
      success: function (data) {
         //将数据显示在页面上
      }
   });
}

$('#pager').pagination({
   pageSize: 10,
   total: 100,
   onPageChanged: function (page) {
      loadData(page);
   }
});

示例

示例1：基本分页组件

创建一个简单的分页组件，显示10页的分页样式。

<div id="pager">
   <ul class="l-page">
      <li class="l-first"></li>
      <li class="l-prev"></li>
      <li class="l-page"><span class="l-text">1 / 10</span></li>
      <li class="l-next"></li>
      <li class="l-last"></li>
      <li class="l-bar"></li>
   </ul>
</div>

$('#pager').pagination({
   pageSize: 10,
   total: 100,
   onPageChanged: function (page) {
      console.log('当前页数：' + page);
   }
});

示例2：自定义分页组件

创建一个自定义的分页组件，去掉原始的“首页”和“尾页”按钮，并添加“跳转”输入框和“确认”按钮。

<div id="pager">
   <ul class="l-page">
      <li class="l-prev"></li>
      <li class="l-page"><input type="text" class="l-input"></li>
      <li class="l-next"></li>
      <li class="l-bar"></li>
      <li class="l-page"><button class="l-btn">确认</button></li>
   </ul>
</div>

$('#pager').pagination({
   pageSize: 10,
   total: 100,
   showFirstLast: false,
   onPageChanged: function (page) {
      console.log('当前页数：' + page);
   }
});

$('#pager .l-btn').click(function () {
   var page = parseInt($('#pager .l-input').val());
   if (!page) {
      alert('请输入正确的页码！');
      return;
   }
   $('#pager').pagination('select', page);
});

以上是基于jQuery ligerUI实现分页样式的完整攻略。