1. 程式人生 > >BootStrap table 傳遞搜尋引數、分頁序號遞增

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

1.查詢條件,有個queryParams屬性。

  $('#allDataTable').bootstrapTable({
            method: 'get',
            queryParams:queryParams,
            toolbar: '#toolbar', //工具按鈕用哪個容器
            striped: true, //是否顯示行間隔色
            cache: false, //是否使用快取,預設為true,所以一般情況下需要設定一下這個屬性(*)
            pagination: true, //是否顯示分頁(*)
            sortable: false, //是否啟用排序
            sortOrder: "asc", //排序方式
            pageNumber: 1, //初始化載入第一頁,預設第一頁
            pageSize: 30, //每頁的記錄行數(*)
            pageList: [30], //可供選擇的每頁的行數(*)
            url: URL, //這個介面需要處理bootstrap table傳遞的固定引數
            queryParamsType: '',
            sidePagination: "server", //分頁方式:client客戶端分頁,server服務端分頁(*)
            strictSearch: true,
            minimumCountColumns: 2, //最少允許的列數
            clickToSelect: true, //是否啟用點選選中行
            searchOnEnterKey: true,
            columns: [{
                    field: 'id',
                    formatter: function (value, row, index) {
                        if (!row.id) {
                            return '暫無';
                        } else {
                            return row.id;
                        }
                    }
                }],
        });

    });

    function queryParams(pageReqeust) {  
        pageReqeust.stat = $('#sta_day').val() ;  //
        pageReqeust.name = $('#username').val(); 
        console.log(pageReqeust);
        return pageReqeust;  
    }

2.點選搜尋按鈕,進行搜尋,呼叫refresh。

  function refresh() {
        $('#allDataTable').bootstrapTable('refresh',  {query: {pageNumber:1}});
    }

3.分頁引數遞增

columns:[{
            field: 'number',
            title: '序號',
            width:5 ,
            align:'center',
            switchable:false,
            formatter:function(value,row,index){
                //return index+1; //序號正序排序從1開始
                var pageSize=$('#tableId').bootstrapTable('getOptions').pageSize;//通過表的#id 可以得到每頁多少條
                var pageNumber=$('#tableId').bootstrapTable('getOptions').pageNumber;//通過表的#id 可以得到當前第幾頁
                return pageSize * (pageNumber - 1) + index + 1;    //返回每條的序號: 每頁條數 * (當前頁 - 1 )+ 序號
            }
        }]

相關推薦

BootStrap table 傳遞搜尋引數序號遞增

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

Django 實現搜尋功能功能和個人理解

最近在研究django的功能,分頁功能根據官方文件可以簡單的實現,但是如果配合上搜尋,對搜尋結果分頁就要稍微費點周折。 話不多少,先上程式碼。 一、搜尋配合分頁 # 獲取、判斷並封裝關keyword鍵搜尋 kw = request.GET.get("keyword",

bootstrap-table 顯示行號,有效

使用bootstrap-table進行表格展示時,總覺得不顯示行號有點彆扭,於是網上找辦法。看到下面的文章: 首先感謝原作者。 思想:藉助bootstrap-table 本身的index屬性, 巧妙的的通過formatter 實現 { field: 'Number',

使用bootstrap-table時遇到的選擇後又執行查詢的問題

我們的頁面有一些下拉選單,比如可以通過時間控制元件去選擇查詢不同時間段的告警,今天發現有這麼個問題,比如使用者可能會有這樣的操作: 1 使用者隨便瀏覽了下,發現好多告警啊,選擇到了第2頁,這時候,頁面向後端傳的是第二頁 page=2; 2 隨後使用者按時間段來查了,這時候只

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

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

BootStraptable技術小結:資料填充列寬可拖動

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

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

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

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

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

bootstrap table 的searchParam引數傳遞

bootstrap table 的searchParam自定義引數傳遞 Bootstrap Table返回的資料為value 和 rows Long total代表的是多少條(總數)  List<T>rows是所有的資料(結果集) 這是在後臺進行設定好返回到前臺的 js原始碼

【easyui】datagrid清除排序引數

在觸發datagrid查詢的前一句程式碼,增加下面的配置引數 //重置列表的查詢引數 function resetDatagridOpt(dataGrid){ var

laraval 多條件搜尋,laraval攜帶引數

$page= intval($request->input('page'))>1?$request->input('page'):1; //排序 最新 熱門 $orderby=$request->input('orderby');

【Python】利用Django搭建REST風格API後臺服務(三)關於DRF的搜尋排序

原文地址 簡介 這是第三篇內容,接下來我們介紹一下如何使用REST framework框架自帶的一些功能來豐富你的API。 我們都知道利用API獲取資源的場景下,不止是傻傻的查詢所有資料,然後對資料程序採集。我們如果要按照要求來篩選我們要的資料呢? 比如,

elasticsearch 5.5.0 java操作(新增索引搜尋

網上資源比較亂、比較雜,稍微總結一下,幫助大家避免像我一樣走彎路………… ———————————————————————————————————— 首先引入maven依賴: <!--elasticsearch--> <dependency

bootstrap table實現server序號連續(當前從上一的結束序號開始)

前言 在使用bootstrap table的時候難免會用到分頁,分頁它提供了兩種方式:client客戶端分頁、server服務端分頁兩種方式。 在專案中一般是不用client分頁的,一般表格資料量大,用client分頁會導致快取爆炸,所以我們選擇se

mysql進階(二)之細談索引與慢日誌

連表 組合索引 rar 偏移量 最小值 num glob 要求 for 索引 1、數據庫索引   數據庫索引是一種數據結構,可以以額外的寫入和存儲空間為代價來提高數據庫表上的數據檢索操作的速度,以維護索引數據結構。索引用於快速定位數據,而無需在每次訪問數據庫表時搜索數據

python16_day18【Django_Form表單

html中 ech 地址 pat gef 是否 sed 需要 hid 一、表單   Django的Form主要具有一下幾大功能: 生成HTML標簽 驗證用戶數據(顯示錯誤信息) HTML Form提交保留上次提交數據 初始化頁面顯示內容     1.Form類   

SQL通用優化方案(where優化索引優化優化事務優化臨時表優化)

truncate height 能夠 時有 大數據量 2017年 固然 分頁 索引優化 SQL通用優化方案:1. 使用參數化查詢:防止SQL註入,預編譯SQL命令提高效率2. 去掉不必要的查詢和搜索字段:其實在項目的實際應用中,很多查詢條件是可有可無的,能從源頭上避免的多余

操作系統學習(三)機制

x86 頁面 管理機 技術 由於 映射 空間 pos 邏輯地址 目錄 1.分頁機制介紹 2.頁表結構 3.頁表項格式 4.虛擬存儲 5.直達底部 分頁機制介紹 分頁機制是 80x86 內存管理機制的第二部分。它在分段機制的基礎上完成虛擬地址到物理地址的轉換過程。分段

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

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

JDBC【數據庫連接池DbUtils框架

rom cda 連接 開源 over rownum cal 每次 常見 1.數據庫連接池 什麽是數據庫連接池 簡單來說:數據庫連接池就是提供連接的。。。 為什麽我們要使用數據庫連接池 數據庫的連接的建立和關閉是非常消耗資源的 頻繁地打開、關閉連接造成系統性能低下 編寫連