BootStrap 用法
1 下载bootstrap组件
2 在jsp页面中加入bootstrap
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css ">
<script type="text/javascript" src=js/bootstrap.min.js></script>
<script type="text/javascript" src=js/bootstrap-paginator.min.js></script>
3
- <script type='text/javascript'>
- var PAGESIZE = 10;
- var options = {
- currentPage: 1, //当前页数
- totalPages: 10, //总页数,这里只是暂时的,后头会根据查出来的条件进行更改
- size:"normal",
- alignment:"center",
- itemTexts: function (type, page, current) {
- switch (type) {
- case "first":
- return "第一页";
- case "prev":
- return "前一页";
- case "next":
- return "后一页";
- case "last":
- return "最后页";
- case "page":
- return page;
- }
- },
- onPageClicked: function (e, originalEvent, type, page) {
- var userName = $("#textInput").val(); //取内容
- buildTable(userName,page,PAGESIZE);//默认每页最多10条
- }
- }
- //获取当前项目的路径
- var urlRootContext = (function () {
- var strPath = window.document.location.pathname;
- var postPath = strPath.substring(0, strPath.substr(1).indexOf('/') + 1);
- return postPath;
- })();
- //生成表格
- function buildTable(userName,pageNumber,pageSize) {
- var url = urlRootContext + "/list.do"; //请求的网址
- var reqParams = {'userName':userName, 'pageNumber':pageNumber,'pageSize':pageSize};//请求数据
- $(function () {
- $.ajax({
- type:"POST",
- url:url,
- data:reqParams,
- async:false,
- dataType:"json",
- success: function(data){
- if(data.isError == false) {
- // options.totalPages = data.pages;
- var newoptions = {
- currentPage: 1, //当前页数
- totalPages: data.pages==0?1:data.pages, //总页数
- size:"normal",
- alignment:"center",
- itemTexts: function (type, page, current) {
- switch (type) {
- case "first":
- return "第一页";
- case "prev":
- return "前一页";
- case "next":
- return "后一页";
- case "last":
- return "最后页";
- case "page":
- return page;
- }
- },
- onPageClicked: function (e, originalEvent, type, page) {
- var userName = $("#textInput").val(); //取内容
- buildTable(userName,page,PAGESIZE);//默认每页最多10条
- }
- }
- $('#bottomTab').bootstrapPaginator("setOptions",newoptions); //重新设置总页面数目
- var dataList = data.dataList;
- $("#tableBody").empty();//清空表格内容
- if (dataList.length > 0 ) {
- $(dataList).each(function(){//重新生成
- $("#tableBody").append('<tr>');
- $("#tableBody").append('<td>' + this.userId + '</td>');
- $("#tableBody").append('<td>' + this.userName + '</td>');
- $("#tableBody").append('<td>' + this.userPassword + '</td>');
- $("#tableBody").append('<td>' + this.userEmail + '</td>');
- $("#tableBody").append('</tr>');
- });
- } else {
- $("#tableBody").append('<tr><th colspan ="4"><center>查询无数据</center></th></tr>');
- }
- }else{
- alert(data.errorMsg);
- }
- },
- error: function(e){
- alert("查询失败:" + e);
- }
- });
- });
- }
- //渲染完就执行
- $(function() {
- //生成底部分页栏
- $('#bottomTab').bootstrapPaginator(options);
- buildTable("",1,10);//默认空白查全部
- //创建结算规则
- $("#queryButton").bind("click",function(){
- var userName = $("#textInput").val();
- buildTable(userName,1,PAGESIZE);
- });
- });
- </script>
总结 : 其中ajax部分的是随内容不同更改的,其他都是可以随意套用
转载于:https://www.cnblogs.com/12344321hh/p/8464408.html
BootStrap 用法相关推荐
- Bootstrap用法(实现注册页面)
文章目录 安装 测试是否可用 基本用法 栅格系统 导航 实现留言板注册界面 安装 去官网下载bootstrap,下载用于生产环境的版本 下载jQuery,直接复制链接用迅雷下载js文件即可 提取boo ...
- python django web典型模块开发实战下载_Django实战 Python Web典型模块与项目开发
本书结合样例,介绍 Django 的基础知识.主要模块的开发以及权限管理等高级内容,并且通过图书管理系统.博客系统.车费管理系统 3 个项目的开发实战,使读者既能掌握 Django 的重要开发技术,又 ...
- mysql offset 问题_MySQL_优化mysql的limit offset的例子, 经常碰到的一个问题是limi - phpStudy...
优化mysql的limit offset的例子 经常碰到的一个问题是limit的offset太高,如:limit 100000,20,这样系统会查询100020条,然后把前面的100000条都扔掉,这 ...
- Python-pptx Chart
image 图表 python-pptx提供了一个用于添加和操作图表的API. 图表对象(例如表格)不是形状. 而是它是包含在GraphicFrame形状中的图形对象. 图形框架形状提供形状API,例 ...
- Python-pptx Placeholders
image MasterPlaceholder对象 Class pptx.shapes.placeholder.MasterPlaceholder 幻灯片母版上的占位符形状. auto_shape_t ...
- bootstrap php zend,Zend Framework教程之Bootstrap类用法概述
本文实例讲述了Zend Framework中Bootstrap类用法.分享给大家供大家参考,具体如下: Zend_Application_Bootstrap_Bootstrapper Zend_App ...
- bootstrap grid php,bootstrap grid用法
bootstrap grid的用法:首先使用container来包裹div:然后在div里面设置行:接着设置列能够快速对这个框架进行搭建:最后通过拖拽浏览器来改变宽窄即可. 本文操作环境:Window ...
- Bootstrap ScrollSpy 用法
用法 Twitter Bootstrap 的 ScrollSpy 插件有两种用法: 通过 data 属性 根据情况,给需要监视的页面元素添加 data-spy="scroll" – ...
- bootstrap v4 toast轻提示正确用法
用vue和小程序开发的同学会感到里面的toast轻提示很好,可惜bootstrap到4以上才支持,而它的帮助里写的代码感觉都是"扯淡"的,根本用不起来效果. 轻提示首先是不影响页面 ...
最新文章
- 如何让普通进程获得 root 的洪荒之力?
- 调用接口处理时间过长,前端访问超时解决方案
- 天地图专题五:在天地图上绘制电子区域并保存数据
- 利用matlab程序分别设计一正弦型信号_ARM Mbed数字信号处理
- Django 报错 ‘polls‘ is not a registered namespace
- YOLO V2论文理解
- 怎样实现EDIUS中素材小范围精确移动
- python自动保存图片_python抓取豆瓣图片并自动保存示例学习
- python+nodejs+vue大学生心理健康测评管理系统
- MongoDB 下载地址列表
- 强大的图片预览组件Viewer.js
- 3分钟看懂:7大教育培训企业邮件营销 (附案例)
- 计算机学院运动会方阵策划案,运动会方阵策划书模板
- centos7软件安装更新
- 梅科尔工作室-江凌宇-鸿蒙笔记3
- 开源顺顺表格excel电子表格控件免费下载
- mysql 查询各个时间段的数据
- php js特效代码如何用,Javascript实现吸顶特效(代码示例)
- 学习笔记:带你十天轻松完成 Go 微服务系列(二)- 服务拆分
- 低年级趣味写话——绘本《小猪变形计》仿写学生优作