cari
Rumahhujung hadapan webTutorial Bootstrapbootstrap-table怎么分页?两种方式介绍

bootstrap-table怎么分页?两种方式介绍

Dec 22, 2020 pm 05:59 PM
bootstraptablepenomboran

本篇文章给大家介绍两种bootstrap table分页的方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

 bootstrap-table怎么分页?两种方式介绍

相关教程推荐:《bootstrap教程

bootstrap table分页的两种方式:

前端分页:一次性从数据库查询所有的数据,在前端进行分页(数据量小的时候或者逻辑处理不复杂的话可以使用前端分页)

服务器分页:每次只查询当前页面加载所需要的那几条数据

bootstrap 下载地址:http://www.bootcss.com/

bootstrap-table 下载地址:http://bootstrap-table.wenzhixin.net.cn/

jquery下载地址:http://www.jq22.com/jquery-info122

分页效果(请忽略样式)

一:准备js、css等文件

▶ 将下载的文档直接放入webapp目录下

▶页面引入需要的js、css

<!-- 引入的css文件  -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap-table/dist/bootstrap-table.min.css"
	rel="stylesheet">
<!-- 引入的js文件 -->
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>

二:html页面标签内容

<div class="panel panel-default">
    <div class="panel-heading">
        查询条件
    </div>
    <div class="panel-body form-group" style="margin-bottom:0px;">
        <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">姓名:</label>
        <div class="col-sm-2">
            <input type="text" class="form-control" name="Name" id="search_name"/>
        </div>
        <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">手机号:</label>
        <div class="col-sm-2">
            <input type="text" class="form-control" name="Name" id="search_tel"/>
        </div>
        <div class="col-sm-1 col-sm-offset-4">
            <button class="btn btn-primary" id="search_btn">查询</button>
        </div>
     </div>
</div>
<table id="mytab" class="table table-hover"></table>

三:JS分页代码

$(&#39;#mytab&#39;).bootstrapTable({
	method : &#39;get&#39;,
	url : "user/getUserListPage",//请求路径
	striped : true, //是否显示行间隔色
	pageNumber : 1, //初始化加载第一页
	pagination : true,//是否分页
	sidePagination : &#39;client&#39;,//server:服务器端分页|client:前端分页
	pageSize : 4,//单页记录数
	pageList : [ 5, 10, 20, 30 ],//可选择单页记录数
	showRefresh : true,//刷新按钮
	queryParams : function(params) {//上传服务器的参数
		var temp = {//如果是在服务器端实现分页,limit、offset这两个参数是必须的
			limit : params.limit, // 每页显示数量
			offset : params.offset, // SQL语句起始索引
			//page : (params.offset / params.limit) + 1, //当前页码 
 
			Name : $(&#39;#search_name&#39;).val(),
			Tel : $(&#39;#search_tel&#39;).val()
		};
		return temp;
	},
	columns : [ {
		title : &#39;登录名&#39;,
		field : &#39;loginName&#39;,
		sortable : true
	}, {
		title : &#39;姓名&#39;,
		field : &#39;name&#39;,
		sortable : true
	}, {
		title : &#39;手机号&#39;,
		field : &#39;tel&#39;,
	}, {
		title : &#39;性别&#39;,
		field : &#39;sex&#39;,
		formatter : formatSex,//对返回的数据进行处理再显示
	}, {
		title : &#39;操作&#39;,
		field : &#39;id&#39;,
		formatter : operation,//对资源进行操作
	} ]
})
 
//value代表该列的值,row代表当前对象
function formatSex(value, row, index) {
	return value == 1 ? "男" : "女";
	//或者 return row.sex == 1 ? "男" : "女";
}
 
//删除、编辑操作
function operation(value, row, index) {
	var htm = "<button>删除</button><button>修改</button>"
	return htm;
}
 
//查询按钮事件
$(&#39;#search_btn&#39;).click(function() {
	$(&#39;#mytab&#39;).bootstrapTable(&#39;refresh&#39;, {
		url : &#39;user/getUserListPage&#39;
	});
})

四:bootstrap-table 实现前端分页

▶ 修改JS分页代码中某些属性

sidePagination:&#39;client&#39;,
queryParams : function (params) {
        var temp = {
            name:$(&#39;#search_name&#39;).val(),
            tel:$(&#39;#search_tel&#39;).val()
        };
        return temp;
    },

▶ 定义user对象

package com.debo.common;
 
public class User {
	
	private Integer id;
	private String loginName;
	private String name;
	private String tel;
	private Integer sex;
	
        //省略Get/Set函数
}

▶ 服务器Controller层代码

/**
*直接一次性查出所有的数据,返回给前端,bootstrap-table自行分页
*/
@RequestMapping("/getUserListPage")
@ResponseBody
public List<User> getUserListPage(User user,HttpServletRequest request){
	List<User> list = userService.getUserListPage(user);
	return list;
}

▶ mabatis语句

<select id="getUserListPage" resultType="com.debo.common.User">
	SELECT * FROM user WHERE 1 = 1
	<if test="name!=null and name !=&#39;&#39;">
		AND name LIKE CONCAT(&#39;%&#39;,#{name},&#39;%&#39;)
	</if>
	<if test="tel!=null and tel !=&#39;&#39;">
		AND tel = #{tel}
	</if>
</select>

五:bootstrap-table 实现服务器端分页

▶ 设置JS分页代码中的某些属性

sidePagination:&#39;server&#39;,
queryParams : function (params) {
    var temp = {
        limit : params.limit, // 每页显示数量
        offset : params.offset, // SQL语句起始索引
        page: (params.offset / params.limit) + 1,   //当前页码
            
        Name:$(&#39;#search_name&#39;).val(),
        Tel:$(&#39;#search_tel&#39;).val()
    };
    return temp;
},

▶ 封装公共的page对象,并让user对象继承page对象

package com.debo.common;
 
public class Page {
	//每页显示数量
	private int limit;
	//页码
	private int page;
	//sql语句起始索引
	private int offset;
	public int getLimit() {
		return limit;
	}
	public void setLimit(int limit) {
		this.limit = limit;
	}
	public int getPage() {
		return page;
	}
	public void setPage(int page) {
		this.page = page;
	}
	public int getOffset() {
		return offset;
	}
	public void setOffset(int offset) {
		this.offset = offset;
	}
 
}
package com.debo.common;
 
public class User extends Page{
	
	private Integer id;
	private String loginName;
	private String name;
	private String tel;
	private Integer sex;
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getLoginName() {
		return loginName;
	}
	public void setLoginName(String loginName) {
		this.loginName = loginName;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getTel() {
		return tel;
	}
	public void setTel(String tel) {
		this.tel = tel;
	}
	public Integer getSex() {
		return sex;
	}
	public void setSex(Integer sex) {
		this.sex = sex;
	}
}

▶ 封装返回数据实体类

package com.debo.common;
 
import java.util.ArrayList;
import java.util.List;
 
public class PageHelper<T> {
    //实体类集合
    private List<T> rows = new ArrayList<T>();
    //数据总条数
    private int total;
 
    public PageHelper() {
        super();
    }
 
    public List<T> getRows() {
        return rows;
    }
 
    public void setRows(List<T> rows) {
        this.rows = rows;
    }
 
    public int getTotal() {
        return total;
    }
 
    public void setTotal(int total) {
        this.total = total;
    }
 
}

▶ 服务器Controller层代码

@RequestMapping("/getUserListPage")
@ResponseBody
public PageHelper<User> getUserListPage(User user,HttpServletRequest request) {
		
        PageHelper<User> pageHelper = new PageHelper<User>();
	// 统计总记录数
	Integer total = userService.getTotal(user);
	pageHelper.setTotal(total);
 
	// 查询当前页实体对象
	List<User> list = userService.getUserListPage(user);
	pageHelper.setRows(list);
 
	return pageHelper;
}

▶ mybatis语句

<select id="getTotal" resultType="int">
	SELECT count(1) FROM user WHERE 1 = 1
	<if test="name!=null and name !=&#39;&#39;">
		AND name LIKE CONCAT(&#39;%&#39;,#{name},&#39;%&#39;)
	</if>
	<if test="tel!=null and tel !=&#39;&#39;">
		AND tel = #{tel}
	</if>
</select>
 
<select id="getUserListPage" resultType="com.debo.common.User">
	SELECT * FROM user WHERE 1 = 1
	<if test="name!=null and name !=&#39;&#39;">
		AND name LIKE CONCAT(&#39;%&#39;,#{name},&#39;%&#39;)
	</if>
	<if test="tel!=null and tel !=&#39;&#39;">
		AND tel = #{tel}
	</if>
	LIMIT #{offset},#{limit}
</select>

tip:增、删、改操作后重新加载表格

$("#mytab").bootstrapTable(&#39;refresh&#39;, {url : url});

更多编程相关知识,请访问:编程教学!!

Atas ialah kandungan terperinci bootstrap-table怎么分页?两种方式介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Artikel ini dikembalikan pada:csdn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Mengintegrasikan Bootstrap ke React: Panduan PraktikalMengintegrasikan Bootstrap ke React: Panduan PraktikalApr 25, 2025 am 12:04 AM

Langkah-langkah untuk mengintegrasikan bootstrap ke dalam projek React termasuk: 1. Pasang pakej bootstrap, 2 mengimport fail CSS, 3. Gunakan nama kelas bootstrap untuk elemen gaya, 4. Integrasi ini menggunakan komponen reaksi dan sistem gaya Bootstrap untuk mencapai pembangunan UI yang cekap.

Untuk apa bootstrap digunakan? Penjelasan praktikalUntuk apa bootstrap digunakan? Penjelasan praktikalApr 24, 2025 am 12:16 AM

BootstrapisapowerfulframeworkthatsImplifiescreatingResponsive, mobile-firstwebsites.itoffers: 1) AgridsystemforadaptableLelayouts, 2) pra-styledelementsLikonsandforms, and3) Javascriptcomponentssuctivity.

Bootstrap: Dari susun atur ke komponenBootstrap: Dari susun atur ke komponenApr 23, 2025 am 12:06 AM

Bootstrap adalah kerangka depan yang dibangunkan oleh Twitter yang mengintegrasikan HTML, CSS dan JavaScript untuk membantu pemaju dengan cepat membina laman web responsif. Fungsi terasnya termasuk: Sistem Grid dan Susun atur: Berdasarkan reka bentuk 12-kolumn, menggunakan susun atur Flexbox, dan menyokong halaman responsif saiz peranti yang berbeza. Komponen dan Gaya: Menyediakan perpustakaan komponen yang kaya, seperti butang, kotak modal, dan lain -lain, dan anda boleh mencapai kesan yang indah dengan menambah nama kelas. Bagaimana Ia Berfungsi: Bergantung pada CSS dan JavaScript, CSS menggunakan preprocessors kurang atau SASS, dan JavaScript bergantung pada jQuery untuk mencapai kesan interaktif dan dinamik. Melalui ciri -ciri ini, bootstrap sangat meningkatkan pembangunan

Apa itu Bootstrap? Pengenalan untuk pemulaApa itu Bootstrap? Pengenalan untuk pemulaApr 22, 2025 am 12:07 AM

Bootstrapisafreecssframeworksheatsimbebdevelopmentbyprovidingpre-styledcomponentsandjavascriptplugins.it'SidealforcreatingResponsive, mobile-firstwebsites, menawarkanflexiblexibridsystomforlayouthorlayoToShoShorlayoToShoShorlayoToShorlayoToShoShorlayoToShoShorlayoToShoShoShorlayoutSandoToShoShoShorLayOrToShoShoShorlayOrToShoShoShoShorlayoToShoShoShorLayoToShorLayOrToShorLayOrToShorLayOrToShorLayOrToShorLayOrTORA

Bootstrap Demystified: Penjelasan RingkasBootstrap Demystified: Penjelasan RingkasApr 21, 2025 am 12:13 AM

Bootstrapisafree, open-sourcecssframeworkthathelpscreateressive, mudah alih-firstwebsites.1) itoffersagridsystemforlayoutflexability, 2) termasukpre-styledcomponentsforquickdesign, dan3) ishighlycustomiDgenericlooksshipsships,

Bootstrap vs React: Memilih Pendekatan Yang BetulBootstrap vs React: Memilih Pendekatan Yang BetulApr 20, 2025 am 12:09 AM

Bootstrap sesuai untuk pembinaan cepat dan projek kecil, sementara React sesuai untuk aplikasi kompleks dan interaktif. 1) Bootstrap menyediakan komponen CSS dan JavaScript yang telah ditetapkan untuk memudahkan pembangunan antara muka responsif. 2) React meningkatkan prestasi dan interaktiviti melalui pembangunan komponen dan DOM maya.

Tujuan Bootstrap: Membina laman web yang konsisten dan menarikTujuan Bootstrap: Membina laman web yang konsisten dan menarikApr 19, 2025 am 12:07 AM

Tujuan utama bootstrap adalah untuk membantu pemaju dengan cepat membina laman web responsif, mudah alih pertama. Fungsi terasnya termasuk: 1. Reka bentuk responsif, yang menyedari pelarasan susun atur peranti yang berbeza melalui sistem grid; 2. Komponen yang telah ditetapkan, seperti bar navigasi dan kotak modal, memastikan estetika dan keserasian penyemak imbas; 3. Penyesuaian dan penyambungan sokongan, dan gunakan pembolehubah sass dan campuran untuk menyesuaikan gaya.

Bootstrap vs Rangka Kerja Lain: Gambaran Keseluruhan PerbandinganBootstrap vs Rangka Kerja Lain: Gambaran Keseluruhan PerbandinganApr 18, 2025 am 12:06 AM

Bootstrap lebih baik daripada Tailwindcss, Yayasan, dan Bulma kerana mudah digunakan dan cepat mengembangkan laman web responsif. 1.Bootstrap menyediakan perpustakaan yang kaya dengan gaya dan komponen yang telah ditetapkan. 2. Perpustakaan CSS dan JavaScript menyokong reka bentuk responsif dan fungsi interaktif. 3. Sesuai untuk pembangunan pesat, tetapi gaya tersuai mungkin lebih rumit.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

SecLists

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

SublimeText3 Linux versi baharu

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)