bootstrap和jQuery做带分页跳转的表格实例_bootstrap实现分页跳转资源-CSDN文库

共28个文件

js：10个

css：7个

map：4个

jquery

bootstrap

javascript

ecmascript

需积分: 23 119 浏览量 2022-03-31 16:03:22 上传评论收藏 546KB ZIP 举报

在前端开发中，Bootstrap 和 jQuery 是两个非常重要的库，它们为构建美观且响应式的网页提供了强大的工具。本实例主要展示了如何使用 Bootstrap 和 jQuery 创建一个带有分页跳转功能的表格，这在数据展示和管理中非常常见。我们将讨论以下几个关键知识点： 1. **Bootstrap**：Bootstrap 是一个流行的开源 CSS 框架，它提供了预定义的样式和组件，如网格系统、表单、按钮、导航等，使得开发者能够快速地创建响应式布局。在这个实例中，Bootstrap 负责提供表格的基础样式和分页组件。 2. **jQuery**：jQuery 是一个轻量级的 JavaScript 库，它简化了 DOM 操作、事件处理、动画制作以及 Ajax 请求。在实现分页功能时，jQuery 可以方便地获取和修改页面元素，以及处理用户交互。 3. **分页功能**：在大数据量的表格中，分页是必不可少的，它可以帮助用户更有效地浏览和管理数据。在本实例中，可能是通过 AJAX 请求获取每一页的数据，并使用 jQuery 更新表格内容。分页按钮的点击事件也需要用 jQuery 来监听和处理，以实现页面切换。 4. **JSON**：`json.json` 文件可能是用来存储或返回数据的，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在这个例子中，它可能包含了表格展示的数据，每页的数据量可能由后端通过 JSON 格式返回给前端。 5. **bootstrap-table-1.19.0**：这可能是 Bootstrap Table 的一个版本，它是一个基于 Bootstrap 的开源插件，用于增强 HTML 表格，提供排序、过滤、分页、列宽调整等功能。在这个实例中，我们可能会看到如何引入并初始化这个插件，以实现更丰富的表格功能。 6. **bootstrap-3.4.1**：这是 Bootstrap 的一个稳定版本，包含 CSS、JS 和字体图标等资源。在实例中，我们可能需要将这些资源链接到 HTML 文件中，以确保 Bootstrap 的样式和组件正常工作。实现步骤可能包括： - 引入 Bootstrap 和 jQuery 的 CSS 和 JS 文件。 - 创建基本的 HTML 结构，包括表格元素和分页导航。 - 使用 jQuery 获取 JSON 数据并填充表格。 - 使用 Bootstrap Table 插件初始化表格，配置分页选项。 - 编写 jQuery 代码处理分页按钮的点击事件，更新表格内容。 - 如果需要，可以使用 AJAX 实现动态加载，即当用户切换页面时，向服务器发送请求获取新数据。以上就是使用 Bootstrap 和 jQuery 创建带分页跳转表格的主要知识点和实现流程。通过掌握这些技能，开发者可以更加高效地构建交互性强、用户体验良好的前端应用。

资源详情

资源评论

资源推荐

收起资源包目录

bootstrap和jQuery做带分页跳转的表格实例.zip （28个子文件）

jQuery

jquery.min.js 82KB

jquery-3.6.0.min.js 87KB

json.json 3KB

bootstrap-table-1.19.0

bootstrap-table.css 10KB

bootstrap-table.js 264KB

bootstrap-table-pagejump.js 2KB

bootstrap-table-zh-CN.min.js 10KB

bootstrap-table.min.css 9KB

bootstrap-table.min.js 119KB

bootstrap-table-pagejump.css 898B

bootstrap-table-zh-CN.js 27KB

bootstrap-3.4.1

css

bootstrap-theme.css 25KB

bootstrap.css.map 382KB

bootstrap.min.css 119KB

bootstrap-theme.min.css.map 74KB

bootstrap.css 143KB

bootstrap-theme.min.css 23KB

bootstrap-theme.css.map 47KB

bootstrap.min.css.map 528KB

fonts

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.woff2 18KB

glyphicons-halflings-regular.ttf 44KB

glyphicons-halflings-regular.eot 20KB

glyphicons-halflings-regular.svg 106KB

npm.js 484B

bootstrap.min.js 39KB

bootstrap.js 74KB

bootstrap.html 7KB

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>bootstrap</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="bootstrap-3.4.1/css/bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" href="bootstrap-table-1.19.0/bootstrap-table.css" rel="external nofollow" > <link rel="stylesheet" href="bootstrap-table-1.19.0/bootstrap-table-pagejump.css" rel="external nofollow" >  <style> .table-green { color: #042cff; background-color: #84f1cd; border-color: #84f1cd; } /*定义类名为.thead-blue的样式*/ .thead-blue th{ color: #666; background-color: #CEEEFB; border-color: #CEEEFB; /* height:52px; line-height:52px; padding-bottom: 20px; */ } </style> </head> <body> <table id="userTable" style="text-align: center;font-size: 14px;margin: auto;word-wrap:break-word; word-break:break-all" > </table> <script src="jQuery/jquery-3.6.0.min.js"></script> <script src="bootstrap-3.4.1/js/bootstrap.min.js"></script> <script src="bootstrap-table-1.19.0/bootstrap-table.js"></script> <script src="bootstrap-table-1.19.0/bootstrap-table-pagejump.js"></script> <script src="bootstrap-table-1.19.0/bootstrap-table-zh-CN.js"></script>  <script> $(function () { //初始化表格 var oTable = new TableInit(); oTable.Init(); }); function TableInit() { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#userTable').bootstrapTable({ url: 'json.json', //请求后台的URL（*） method: 'get', //请求方式（*）GET POST striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页（*） sortOrder: "asc", //排序方式 queryParamsType: '', dataType: 'json', paginationShowPageGo: true, showJumpto: true, pageNumber: 1, //初始化加载第一页，默认第一页 queryParams: queryParams,//请求服务器时所传的参数 sidePagination: 'server',//指定服务器端分页 pageSize: 10,//单页记录数 pageList: [10, 20, 30, 40],//分页步进值 search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 silent: true, showRefresh: false, //是否显示刷新按钮 showToggle: false, minimumCountColumns: 2, //最少允许的列数 uniqueId: "id", //每一行的唯一标识，一般为主键列 theadClasses: "thead-blue",//设置thead-blue为表头样式 classes: "table table-bordered table-striped table-hover table-condensed", //rowStyle:rowStyle,//通过自定义函数设置行样式 paginationLoop:true,//分页连续循环 paginationParts:['pageInfo', 'pageSize', 'pageList'], //pageInfo,pageInfoShort columns: [{ checkbox: false, visible: false }, { field: 'id', title: '序号', align: 'center', // formatter: function (value, row, index) { // return index + 1; // } }, { field: 'pName', title: '产品名称', align: 'center', // width: '230px' }, { field: 'pCreateDate', title: '年份', align: 'center' }, { field: 'numIssues', title: '期数', align: 'center' }, { field: 'editeTime', title: '编辑时间', align: 'center' }, { field: 'operation', title: '操作', align: 'center', //events: operateEvents,//给按钮注册事件 formatter: addFunctionAlty//表格中增加按钮 }], responseHandler: function (res) { //后台返回的结果 console.log(res); if(res.code == "OK"){ var userInfo = res.data; var NewData = []; if (userInfo.length) { for (var i = 0; i < userInfo.length; i++) { var dataNewObj = { 'id': '', "pName": '', 'pCreateDate': '', "numIssues": '', 'editeTime': '', 'status': '' }; dataNewObj.id = userInfo[i].id; dataNewObj.pName = userInfo[i].pName; dataNewObj.pCreateDate = userInfo[i].pCreateDate.replace(/-/g,'/'); dataNewObj.numIssues = userInfo[i].numIssues; dataNewObj.editeTime = userInfo[i].editeTime.replace(/-/g,'/'); dataNewObj.status = userInfo[i].status; NewData.push(dataNewObj); } console.log(NewData) } var data = { total: res.total, rows: NewData }; return data; } } }); }; // 得到查询的参数 function queryParams(params) { var pName = $("#keyWord").val(); console.log(pName); var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 pageNum: params.pageNumber, pageSize: params.pageSize, pName: pName }; return JSON.stringify(temp); } return oTableInit; } // 表格中按钮 function addFunctionAlty(value, row, index) { var btnText = ''; btnText += "<button type=\"button\" id=\"btn_download" + row.id + "\" οnclick=\"downloadPPT(" + "'" + row.id + "'" + ")\" class=\"btn-g\">下载</button>  "; return btnText; } function rowStyle(row, index) { var style = {}; style={css:{'background-color':'#EAEBEF','color':'#FFF'}}; if (index % 2 === 0) { style={css:{'background-color':'#FFF','color':'#666'}}; } return style; } //刷新表格 function getUserList() { $("#userTable").bootstrapTable('refresh'); } </script> </body> </html>