当前位置: 首页 > 工具软件 > jqPaginator > 使用案例 >

解决bootStrap分页jqPaginator的初始化及利用append动态渲染table数据

有骏祥
2023-12-01

1、我用的是bootstrap,所以首先导入css样式

	<link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">

2、将js导入项目并引入js

	<script src="js/jquery-1.11.0.min.js"></script>
	<script src="js/jqPaginator.js"></script>

3、简单的demo代码如下(前端代码)

	<body>
	<div >
	    <div class="container">
	        <div class="row clearfix">
	            <div class="col-md-12 column">
	                <table class="table table-striped" id="ds_table" data-toggle="table">
	                    <thead >
	                    <tr>
	                        <th>
	                            序号
	                        </th>
	                        <th>
	                            区域
	                        </th>
	                        <th>
	                            检测时间
	                        </th>
	                        <th>
	                            PM10数据
	                        </th>
	                        <th>
	                            PM2.5数据
	                        </th>
	                        <th>
	                            监测站
	                        </th>
	                    </tr>
	                    </thead>
	                    <tbody id="tbody">
					//	这个tbody是用来存放数据的,
	                    </tbody>
	                </table>
	            </div>
	        </div>
	    </div>
	</div>

4、存放页码的div

	<div class="page " style="text-align: center">
	    <ul class="pagination" id="pagination"></ul>
	</div>

5、js代码

	<script>
	    $(function(){
	        //当前页,第一次访问的时候,调用这个方法将1和true传入sendRequest方法中。
	        sendRequest(1,true);//
	    });
	    function del(id) {//删除的方法
        alert(id);
    }
    function edit(id) {//编辑的方法
        alert(id);
    }
	    function sendRequest(num,isfirst) {//isfirst:是否是第一次访问
	        $.ajax({
	            url: "http://localhost:8080/index",
	            //将page传入后台,pageSize我在后台定义过了,后台用的是mybatis的pageHelperfenye
	            data: "page=" + num,      
	            type: "GET",
	            dataType: "json",
	            success: function (result) { 
	                var total = result.total;   //数据总条数
	                var pageSize = result.pageSize; //每页显示多少条数据,定义的是5条
	                var tbody = document.getElementsByTagName("tbody")[0]; //通过id获取tbody
	                tbody.innerHTML = "";			//将tbody为空,
	               console.log(result.list);	//测试
	                for ( var  index  in result.list) {  //for循环,实现动态渲染数据到tbody
	                    var account = result.list[index];  
	                    $("#tbody").append(  //用append追加数据,不会覆盖数据,不要忘了上边还有一个  tbody.innerHTML="";
	                        "<tr>\n" +
	                        "<td>" + account.id + "</td>\n" +
	                        "<td>" + account.district.name + "</td>\n" +
	                        "<td>" + account.monitorTime + "</td>\n" +
	                        "<td>" + account.pm10 + "</td>\n" +
	                        "<td>" + account.pm25 + "</td>\n" +
	                        "<td>" + account.monitoringStation + "</td>" + 
	                        "<td>"+"<button class=\"btn dropdown-toggle\" οnclick=edit('"+account.id+"') >编辑"+"</button>"+"</td>"+
                            "<td>"+"<button class=\"btn dropdown-toggle\" οnclick=del('"+account.id+"') >删除"+"</button>"+"</td>"+       
	                        "</tr>")
	                }
	                if (isfirst) {			//isfirst是否是第一次访问,如果第一次 的话,上边传的是true;
	                    $('#pagination').jqPaginator({   //这个是bootstrap提供的初始化的操作,文档上有
	                        //totalPages: 7,		//最大页数,只要给他总数据条数和每页显示数量就行了,他自己会算最大页数的
	                        visiblePages: 5,  //页码数量
	                        totalCounts:total, //数据总条数
                        	pageSize:pageSize,//每页显示几条内容
	                        currentPage: num, //当前页
	                        //下边的是bootstrap所提供的参数
	                        first: '<li class="first"><a href="javascript:;">首页</a></li>',
	                        prev: '<li class="prev"><a href="javascript:;"><i class="arrow arrow2"></i>上一页</a></li>',
	                        next: '<li class="next"><a href="javascript:;">下一页<i class="arrow arrow3"></i></a></li>',
	                        last: '<li class="last"><a href="javascript:;">末页</a></li>',
	                        page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
	                        onPageChange: function (num, type) {//这个方法是,如果你点击页码,下一页的话就会触发
	                            //页面变化回调函数
	                            if (type == "change") { //如果点击页数,type=change
	                                //alert(num);
	                                sendRequest(num, false);//num是页数
	                            }
	                        },
	                        error: function () {
	                            alert("错误请求")
	                        }
	                    });
	                }
	            }
	        })
	    }
	</script>

6、后台代码。

我用的是springboot+mybatis,一个简单的演示。

6.1. 分页用的是pageHelper分页助手
先导入依赖

<!-- pageHelper分页助手--->
 <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.5</version>
 </dependency>
 
	 <!--        1. SpringBoot核心依赖. -> spring-boot-starter-->
	        <dependency>
	            <groupId>org.springframework.boot</groupId>
	            <artifactId>spring-boot-starter</artifactId>
	        </dependency>
	        <!--        2. SpringBoot的测试启动器. -> spring-boot-starter-test-->
	        <dependency>
	            <groupId>org.springframework.boot</groupId>
	            <artifactId>spring-boot-starter-test</artifactId>
	            <scope>test</scope>
	        </dependency>
	        <!--        3. MySQL驱动. -> mysql-connector-java-->
	        <dependency>
	            <groupId>mysql</groupId>
	            <artifactId>mysql-connector-java</artifactId>
	            <version>8.0.19</version>
	        </dependency>
	        <!--        4. Druid连接池. -> druid-spring-boot-starter-->
	        <dependency>
	            <groupId>com.alibaba</groupId>
	            <artifactId>druid-spring-boot-starter</artifactId>
	            <version>1.1.10</version>
	        </dependency>
	        <!--        5. Mybatis框架. -> mybatis-spring-boot-starter-->
	        <dependency>
	            <groupId>org.mybatis.spring.boot</groupId>
	            <artifactId>mybatis-spring-boot-starter</artifactId>
	            <version>2.1.1</version>
	        </dependency>
	        <!--        6. lombok.     -> lombok-->
	        <dependency>
	            <groupId>org.projectlombok</groupId>
	            <artifactId>lombok</artifactId>
	        </dependency>

6.2、application.yml文件配置

#用的Druid数据库连接池
spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql:///air?serverTimezone=UTC
    username: root
    password: root
    type: com.alibaba.druid.pool.DruidDataSource
#这个是mybatis的配置。映射的mapper的路径,起的别名
mybatis:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: com.qf.entity
  #开启驼峰命名
  configuration:
    map-underscore-to-camel-case: true
#这个是日志级别,
logging:
  level:
    com.qf.mapper: debug
#分页助手必须要的配置,mybatis文档上有,直接拿来用
pagehelper:  
  helperDialect: mysql
  reasonable: true
  support-methods-arguments: true
  params: count=countSql

6.3、controller代码

package com.qf.controller;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.qf.entity.Air;
import com.qf.service.AirService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import java.util.List;

@Controller
public class AirController {
  @Autowired
  private AirService airService;
  @GetMapping("/index")
  @ResponseBody
  public PageInfo<Air> findAll( @RequestParam("page") Integer page){
      System.out.println("page:"+page);
      PageHelper.startPage(page,5);
      List<Air> all = airService.findAll();
      PageInfo<Air> result = new PageInfo<>(all);
      return  result;
  }

}

主要是记录append的用法,动态渲染table数据,以及bootstrap分页的使用。

 类似资料: