2. 程式人生 > >Bootstrap-table實現查詢、分頁、匯出、引數設定及前後端程式碼示例詳解

Bootstrap-table實現查詢、分頁、匯出、引數設定及前後端程式碼示例詳解

阿新 • • 發佈：2019-02-14
$(function(){ initTable(); }); function initTable() { //先銷燬表格 $("#bootstrapTable").bootstrapTable({ //表格高度 height: getHeight(), //伺服器資料的請求方式 'get' 或 'post'。 method: 'get', //設定為 true 會有隔行變色效果 striped: true, //設定為 true 會在表格底部顯示分頁條。 pagination: true
, //請求後臺的URL url: '/MsgDealCenterAction/listData', //伺服器返回的資料型別。 dataType: 'json', //工具按鈕用哪個容器 toolbar: '#toolbar', //是否使用快取，預設為true，所以一般情況下需要設定一下這個屬性 cache: false, //設定為 true 啟用分頁條無限迴圈的功能 // paginationLoop: true, //設定在哪裡進行分頁，可選值為 'client' 或者 'server'。設定 'server'時，必須設定伺服器資料地址（url）或者重寫ajax方法
sidePagination: 'server', //初始化載入第一頁，預設第一頁 pageNumber: 1, //每頁的記錄行數 pageSize: 10, //可供選擇的每頁的行數 pageList: [10,15,20, 50, 100], //設定為false 將禁止所有列的排序。 sortable: true, //設定預設排序為 name sortName: 'insert_time', //定義排序方式，'asc' 或者 'desc'。
sortOrder: "desc", //是否顯示重新整理按鈕 showRefresh: true, //是否顯示內容列下拉框。 showColumns: true, //顯示匯出外掛 showExport: true, //是否顯示右上角的搜尋框 search: false, //是否顯示切換檢視（table/card）按鈕。 showToggle:false, //是否啟用點選選中行 // clickToSelect: true, //設定為undefined可以獲取pageNumber，pageSize，searchText，sortName，sortOrder //設定為limit可以獲取limit, offset, search, sort, order queryParamsType:'undefined', //請求伺服器資料 queryParams: function queryParams(params){ var param = { pageNumber: params.pageNumber, pageSize: params.pageSize, sortName: params.sortName, sortOrder: params.sortOrder }; return param; }, //載入成功時執行 onLoadSuccess: function(data){ console.log("載入成功"); }, //載入失敗時執行 onLoadError: function(status){ console.log("載入資料失敗"+status); }, columns: [ { title: "全選", field: "select", checkbox: false, width: 20,//寬度 align: "left",//水平 valign: "middle", formatter: function (value, row, index) { return row._id; } },{ title: '編號',//標題 可不加 align: 'center', valign: 'middle', sortable: false, formatter: function (value, row, index) { return index+1; } },{ field: 'source', title: '產品線', align: 'center', valign: 'middle', sortable: false, width: '80px' },{ field: 'msg_type', title: '訊息型別', align: 'center', valign: 'middle', sortable: false },{ field: 'account_name', title: '賬號型別', align: 'center', valign: 'middle', sortable: false },{ field: 'msg_name', title: '訊息名稱', align: 'left', valign: 'middle', sortable: false },{ field: 'msg', title: '訊息內容', align: 'left', valign: 'middle', sortable: false, visible: false, //value【欄位值】row【row對應的整條記錄】index【行索引】 formatter: function format(value,row,index){ console.log(typeof(value)) // 縮排一個2個空格 return JSON.stringify(value, null, 2); } },{ field: 'msg_start_time', title: '起始有效時間', align: 'center', valign: 'middle', sortable: true },{ field: 'msg_end_time', title: '結束有效時間', align: 'center', valign: 'middle', sortable: true },{ field: 'insert_time', title: '入庫時間', align: 'center', valign: 'middle', sortable: true },{ field: 'update_time', title: '更新時間', align: 'center', valign: 'middle', sortable: true, visible: false }] }); } //獲取table的高度 function getHeight() { return $(window).height() - 100; }

相關推薦

Bootstrap-table實現查詢、分頁、匯出、引數設定及前後端程式碼示例詳解

$(function(){ initTable(); }); function initTable() { //先銷燬表格 $("#bootstrapTable").bootstrapTable({ //表格高度 height: getHeight

bootstrap-table前臺和後臺分頁對json格式的要求

total bsp 為什麽 ros 技術 ots cli 前端 microsoft Bootstrap是一款前端非常流行的框架，其中的表格更為大家經常使用。大家都知道表格的分頁分為前臺和後臺分頁，也就是表格配置中sidePagination屬性，當sidePaginatio

基於Metronic的Bootstrap開發框架經驗總結（18）-- 在代碼生成工具Database2Sharp中集成對Bootstrap-table插件的分頁及排序支持

關註 基礎 表頭 數據 database 一定的 處理 tree的使用 適合 在我們開發系統界面，包括Web和Winform的都一樣，主要的界面就是列表展示主界面，編輯查看界面，以及一些輔助性的如導入界面，選擇界面等，其中列表展示主界面是綜合性的數據展示界面，一般往往需要對

bootstrap table使用：前端分頁，獲取值棧中的json值，載入到table中，獲取選中的行資訊

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ include file="/common/taglibs.jsp" %> <!DOCTYPE html> <html

mongoDB的Find詳解、分頁和排序、遊標

1.指定返回的鍵    db.[documentName].find ({條件},{鍵指定})         資料準備persons.json var persons = [{  name:"jim",  age:25,  email:"[email prote

用標準的SQL語句實現查詢記錄分頁

在絕大多數的應用中，返回大量的符合條件的記錄是司空見慣的，最典型的莫過於搜尋了。在搜尋的應用中，使用者給出搜尋條件，伺服器查出符合條件的記錄。但往往搜尋會返回大量的資料記錄，如果在網頁中，往往是通過分頁的方式來實現，頁面提供諸如上一頁，下一頁等等按鈕來實現分頁。現在主要有以下

BootStrap Table前臺和後臺分頁對JSON格式的要求

serve pad name spa paginati dep side border containe BootStrap Table前臺和後臺分頁對JSON格式的要求 前臺分頁： sidePagination: "client"，對應的json格式必須為： [

display table 標籤用法 對分頁和匯出excel有幫助

在web.xml下新增一個filter   <filter>     <filter-name>exportFilter</filter-name>     <filter-class>org.displaytag.filter.ResponseOverride

List、Set、Map集合最常用六個子類及它們之間的區別詳解（含經典面試題）

集合： 在程式設計中，我們需要管理很多物件集，比如某班全部的同學資訊，某個公司的人員資料等等。JAVA集合就是提供某種資料結構的支援，即存放物件，並讓這些物件按照某種資料結構存放。 集合與陣列的區別： 1. 陣列存放的元素個數是在定義陣列時固定的。

PHP和Redis實現在高並發下的搶購及秒殺功能示例詳解

出現 comm 不同 高並發 日誌 sql 推薦 結果 update 搶購、秒殺是平常很常見的場景，面試的時候面試官也經常會問到，比如問你淘寶中的搶購秒殺是怎麽實現的等等。搶購、秒殺實現很簡單，但是有些問題需要解決，主要針對兩個問題： 一、高並發對數據庫產生的壓力二、競爭

基於Metronic的Bootstrap開發框架經驗總結（16）-- 使用外掛bootstrap-table實現表格記錄的查詢、分頁、排序等處理

在業務系統開發中，對錶格記錄的查詢、分頁、排序等處理是非常常見的，在Web開發中，可以採用很多功能強大的外掛來滿足要求，且能極大的提高開發效率，本隨筆介紹這個bootstrap-table是一款非常有名的開源表格外掛，在很多專案中廣泛的應用。Bootstrap-table外掛提供了非常豐富的屬性設定，可以實現

使用外掛bootstrap-table實現表格記錄的查詢、分頁、排序等處理

在業務系統開發中，對錶格記錄的查詢、分頁、排序等處理是非常常見的，在Web開發中，可以採用很多功能強大的外掛來滿足要求，且能極大的提高開發效率，本隨筆介紹這個bootstrap-table是一款非常有名的開源表格外掛，在很多專案中廣泛的應用。Bootstrap-tab

BootStrap的table技術小結：資料填充、分頁、列寬可拖動

本文結構：先說明，後代碼。拷貝可直接執行。 一、demo結構： 二、檔案引入 　　這些裡面除了下面2個比較難找，其他的都很好找 　　bootstrap-table-resizable.js 　　colResizable-1.6.min.js 三、模擬的message.json資料準備

ssm框架實現條件、分頁查詢【親測】

0.用到了jquery、AJAX（前端）、ssm框架 1. input輸入框和查詢按鈕 <input id="queryText" type="text" placeholder="請輸入查詢條件">   <button id

JDBC實現增刪改查、模糊查詢、分頁查詢、子查詢以及體現單例設計模式連線資料庫

package com.csdn.dao; import java.io.IOException; import java.io.InputStream; import java.util.Properties; /** * 單例模式 *

BootStrap table 傳遞搜尋引數、分頁序號遞增

1.查詢條件，有個queryParams屬性。 $('#allDataTable').bootstrapTable({ method: 'get', queryParams:queryParams,

Entity Framework4.1實現動態多條件查詢、分頁和排序

EF通用的分頁實現: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 2

JAVAEE——BOS物流項目04：學習計劃、datagrid、分頁查詢、批量刪除、修改功能

報錯 datagrid config exce this 調整 bject ephone 窗口 1 學習計劃 1、datagrid使用方法（重要） n 將靜態HTML渲染為datagrid樣式 n 發送ajax請求獲取json數據創建datagrid n 使用easyUI提

MongoDB .Net Driver(C#驅動) - 內嵌數組/嵌入文檔的操作(增加、刪除、修改、查詢(Linq 分頁))

odbc article err native linq protocol remove mit 實體類 目錄 一、前言 (一) 運行環境 二、前期準備工作 （一) 創建 MongoDBContext MongoDb操作上下文類 （二）創建測試類 （三） 創建測試代碼

ASP.NET MVC 結合bootstrap-table-實現服務端分頁

bootstrap-table展示資料很好用，但是當資料量很大時，存在效能問題。bootstrap-table需要分頁的功能，需要時就請求資料，而不是一次性載入到客戶端上。bootstrap-table前臺預設時客戶端分頁，此時的分頁已失去了應有的作用。因此使用服務端，話不多說，直接上程式碼 前