基於bootstrap的簡單分頁前端介面實現

阿新 • • 發佈：2019-01-12

①效果圖

②bootstrap基本模板

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->

<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 外掛都依賴 jQuery，所以必須放在前邊) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 載入 Bootstrap 的所有 JavaScript 外掛。你也可以根據需要只加載單個外掛。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<title>分頁的簡單實現</title>
</head>
<body>
<!--柵格佈局-->
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-6" style="font-size: large" >
<br>
<!--查詢-->
<input id="queryClassId" type="text" style="width: 78px">
<button id="queryButton" class="btn btn-primary">查詢</button>
<!--新增表格-->
<!--條紋狀表格-->
<table class="table table-hover table-responsive">
<!--表頭-->
<thead>
<tr class="info">
<th>學號</th>
<th>姓名</th>
<th>班級</th>
</tr>
</thead>

<tbody id="showStudentByPage">

</tbody>

</table>
<!--分頁導航欄-->
<div>
共<span id="totalNumber" style="color: dodgerblue">0</span>條   
當前第<span id="currentPage" style="color: black">1</span>/<span id="totalPage" style="color: black">1</span>頁
   
<button id="Previous" class="btn btn-default">Previous</button>
<button id="Next" class="btn btn-default">Next</button>
跳至<input id="pageNumber" type="text" style="width: 78px">頁
<button id="goPage" type="button" class="btn btn-primary">GO</button>
</div>


</div>
<div class="col-lg-3"></div>
</div>



<!--引入js-->
<script type="text/javascript" src="/js/paging.js"></script>
</body>
</html>

③js程式碼

$(document).ready(function () {

//簡單分頁功能之查詢
$("#queryButton").click(function () {

var classID = $("#queryClassId").val();
var pageNumber = $("#pageNumber").val().trim();
showStudentsByPage(classID,pageNumber);
});

//簡單分頁功能之go
$("#goPage").click(function () {
var classID = $("#queryClassId").val();
var pageNumber = $("#pageNumber").val().trim();
showStudentsByPage(classID,pageNumber);
});

//簡單分頁功能之上一頁
$("#Previous").click(function(){
var classID = $("#queryClassId").val();
var pageNumber = $("#currentPage").text();
var nextPageNumber = parseInt(pageNumber)-1;
showStudentsByPage(classID,nextPageNumber);
});

//簡單分頁功能之下一頁
$("#Next").click(function(){
var classID = $("#queryClassId").val();
var pageNumber = $("#currentPage").text();
var nextPageNumber = parseInt(pageNumber)+1;
showStudentsByPage(classID,nextPageNumber);
});


function showStudentsByPage(classID,pageNumber) {

//ajax請求
$.ajax({
//請求方式
type: 'GET',
//路徑
url: 'http://localhost:8080/student/pageNumber',
//傳遞的引數
data: {classID:classID,pageNumber:pageNumber},
xhrFields: {
withCredentials: true
},
crossDomain: true,
//返回的資料型別
dataType: "json",
//回撥函式 ,成功時返回的資料存在形參data裡
success: function(data){
//拼寫HTML程式碼
var HTML_CODE="";
for(var i=0;i<data.testStudents.length;i++) {
HTML_CODE+=
"<tr><td>" + data.testStudents[i].studentId + "</td>" +
"<td>" + data.testStudents[i].studentName + "</td>" +
"<td>" + data.testStudents[i].studentClassId + "</td></tr>"
}
$("#showStudentByPage").html(HTML_CODE);
//顯示總條數
$("#totalNumber").text(data.page.totalNumber);
//顯示當前頁數
$("#currentPage").text(data.page.currentPage);
//顯示總頁數
$("#totalPage").text(data.page.totalPage);


},
error: function(){
alert("連線失敗");
}
});
}
});

基於bootstrap的簡單分頁前端介面實現

①效果圖②bootstrap基本模板<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compati

基於bootstrap table分頁資料及行內編輯和匯出資料（一）

第一步，匯入相應的css和js檔案 <link href="~/Content/bootstrap.min.css" rel="stylesheet" />  <

基於Bootstrap的分頁元件bootstrap-pager使用說明

bootstrap-pager 本元件主要使用在扁平風格頁面的自定義分頁，做到頁面顯示和分頁元件分離。本分頁元件在JavaCode中應用。鏈家網房屋資訊查詢分頁、拉鉤大鯤專案的分頁都使用類似的分頁元件。使用 Step1：引用樣式

Bootstrap Paginator分頁外掛+ajax 實現動態無重新整理分頁

之前做分頁想過做淘寶的那個，但是因為是後臺要求不高，就Bootstrap Paginator外掛感覺還蠻容易上手，所以就選了它。 Bootstrap Paginator分頁外掛下載地址： 1.這是需要分頁的頁面放的 js函式： <span style="font-

簡單分頁功能的實現

分頁功能有很多種實現方法，但是大體原理都是差不多的。先說下我理解的分頁的原理吧。首先，通過sql語句查詢，後臺可以得到資料庫中所需要資料的總條數，通過limit，也能得到指定範圍的資料，這是後臺的事。我們前端大概需要兩個引數，一個是當前頁（pageN

自己寫的基於bootstrap的簡單分頁插件

自己寫的基於bootstrap的簡單分頁<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>

基於遊標的分頁介面實現

``` 所以可能習慣性的就使用類似的方式建立分頁請求介面，讓客戶端提供`page`、`size`兩個引數。這樣的做法並沒有什麼問題，在`PC`的表格，移動端的列表，都能夠整整齊齊的展示資料。但是這是一種比較常規的資料分頁處理方式，適用於沒有什麼動態的過濾條件的資料。而如

Thymeleaf+bootstrap實現簡單分頁

做專案時候，想找一個簡單的分頁程式碼，懶得用前端框架和json，沒找到，就自己寫了一份簡單的需要從後臺傳兩個變數：indexPage（當前頁數）totalPage（一共頁數）效果圖如下：總體思路是以當前頁為中心，左邊三個按鈕右邊三個按鈕，挨個判斷+頁數和-頁數時有沒有超出範圍

基於jquery的簡單分頁實現

先上圖：之前在做表格外掛想把分頁整合進去，原本去網站找一個現成的整合進去，發現有些太簡單或者很複雜，達不到自己的要求，自己想還是自己整一個，順便了解一下其中的原理。分頁樣式是基於boosta

基於nodejs的簡單分頁的實現

一、專案描述這個demo是基於昨天我寫的增刪改查的例子的。在昨天的例子的基礎上，我增加了基本的分頁功能。由於本人對於nodejs的理解不夠深入所以在分頁實現上，有很多不足之處。在儲存分頁資訊上我使用的是request層儲存，也就是用get傳值的古老辦法，主要是由於對於no

基於jquery 的分頁外掛，前端實現假分頁效果

上次分享了一款jquery外掛，現在依舊分享這個外掛，不過上一次分享主要是用於regular框件，且每一頁資料都是從後端獲取過來的，這一次的分享主要是講一次性獲取完資料然後手動進行分頁。此需求基本上是和前端搜尋掛鉤的。所有的資料都在頁面裡只是展示的不同。這樣前端搜尋就能從全

ASP.NET MVC 簡單的分頁思想與實現

www 新增圖文 tom 最簡基本描述 clas asp.net ，作為一個程序猿，數據分頁是每個人都會遇到的問題。解決方案更是琳瑯滿目，花樣百出。但基本的思想都是差不多的。　　下面給大家分享一個簡單的分頁器，讓初學者了解一下最簡單的分頁思想，以及在ASP.NET

實現基於vue的分頁器外掛，各個功能都可以自己配置，樣式可以隨心所欲更改

首先展示一下效果（不會做gif 尷尬）思路，第一步ul li 前面一個上一頁按鈕後面一個下一頁按鈕 <ul class="pagenation"> <li class="page_first"&

簡單分頁，無需外掛實現上一頁|下一頁分頁功能

分頁功能五花八門,外掛的使用也很方便。最近做專案,分頁功能是寫好的了，利用bootstarp 簡單實現的, 類似於這種但由於資料越來越多,這種迴圈的方式很不好看。於是想到上一頁| 下一頁分頁的樣式,看到網上使用外掛,但是表單都是拼的,由於和自己程式碼出入

jsp實現的簡單分頁，適合新手用

<%@ page language="java" import="java.util.*,java.sql.*,com.ejb.pojo.User" pageEncoding="utf-8"%> <%--<jsp:useBean id="db" class="com.ejb.

基於Mybatis分頁外掛PageHelper實現分頁功能

使用PageHelper外掛實現分頁功能分頁的功能幾乎是所有專案必備的功能，在SSM（spring 、springmvc、mybatis）組織的專案中如何實現分頁呢？下面介紹一種基於mybatis的分頁外掛PageHelper來幫助我們實現分頁的功能。

使用spring data 對mongodb實現簡單分頁

//對某一書籍下的所有dxh按訪問量排序並分頁 public List<CKDXH> getPartitionDXHCKCountByBookIdandDes(Integer bookId,Integer start,Integer pagesize){

vue.js 元件實現簡單分頁效果

前言為了練習vue.js 之前做了一個vue.js前端分頁效果，後面看到vue.js元件內容，就試著把這個功能寫成一個簡單元件，向元件元素傳遞一個object引數，包含分頁資料，顯示的列名資訊，分頁資訊，元件提供一個事件，傳遞給父元素一個分頁資訊，父元素拿著

結合Tab，ViewPager，Fragment實現簡單分頁滑動

在APP設計當中，使用ViewPager和Fragment來實現分頁滑動並不少見，該設計可以利用少量的空間來實現多內容的展示。效果圖如下：以下是實現該功能的程式碼： MainActivity public class MainActivity e

Servlet+Html5+ajax 實現簡單分頁

Servlet ------dao層package com.vixuan.dao; import java.sql.Connection; import java.sql.ResultSet; import java.sql.SQLException; import ja

基於bootstrap的簡單分頁前端介面實現

相關推薦