前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >python测试开发django-184.bootstrap-table 前端分页搜索相关配置

python测试开发django-184.bootstrap-table 前端分页搜索相关配置

作者头像
上海-悠悠
发布2022-01-10 08:27:36
1.9K0
发布2022-01-10 08:27:36
举报

前言

bootstrap-table 分页方式可以选 server 和client 两种分页方式。

  • 当选择前端分页(client)的时候,可以在页面搜索table表格数据(不查询数据库)
  • 当选择服务器分页(server)的时候,根据可以queryParams属性设置条件查询数据库

本篇先学习择前端分页(client),在页面搜索筛选数据

bootstrap table 查询搜索配置

表格内容前端搜索,不查询数据库 bootstrap table表格搜索可以通过以下属性进行设置

属性名称

说明

search

true

开启搜索输入框

searchOnEnterKey

true

回车后执行搜索

strictSearch

true

完全匹配搜索,不是like模糊查询

trimOnSearch

true

自动去除关键词两边空格

searchAlign

left/right

left搜索框在左边 right在右边

searchTimeOut

1000

设置搜索超时时间,数据量很大时才有用

searchText

字符串

初始化时默认搜索的关键词

customSearch

自定义方法

自定义搜索

showSearchClearButton

true

开启清空按钮

开启搜索框

开启搜索相关3个属性

代码语言:javascript
复制
        search: true,                       //是否显示表格搜索
        searchOnEnterKey:true,            //回车后执行搜索//
        showSearchButton: true,             //搜索确定按钮

页面显示效果

输入框输入内容按回车,或点确定按钮都可以在页面上搜索

完整的js内容

代码语言:javascript
复制
// 加载table
$(document).ready(function(){
    var url = '/api/comparator/';
    var columns = [
        {
            checkbox: true,
            visible: true          //是否显示复选框
        },
        {
            field: 'id',
            title: 'ID',
            class: 'col-md-1'
        }, {
            field: 'comparator',
            title: '校验方式',
            class: 'col-md-5'
        },
         {
            field: 'create_time',
            title: '创建时间',
             class: 'col-md-2'
        },
        {
            field: 'update_time',
            title: '更新时间',
             class: 'col-md-2'
        },
         {
             field:'operate',
             title: '操作',
             class: 'col-md-2',
             align: 'center',
             formatter: actionFormatter
         }
    ];
    $("#table").bootstrapTable({
        toolbar: '#toolbar',
        url: url,         //请求后台的URL(*)
        method: 'get',    //请求方式(*)
        cache: false,     //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
        theadClasses: "bg-info",
        pagination: true,   //是否显示分页(*)
        pageSize: 10,       //每页的记录行数(*)
        pageList: [10, 20, 50, 100, 'All'], //可供选择的每页的行数(*)
        sidePagination: "client",    //分页方式:client客户端分页,server服务端分页(*)
        pageNumber: 1,                      //初始化加载第一页,默认第一页
        search: true,                       //是否显示表格搜索
        searchOnEnterKey:true,            //回车后执行搜索//
        showSearchButton: true,             //搜索确定按钮
        // showSearchClearButton: true,       //清空输入框
        // singleSelect: true,#}
        clickToSelect: true,
        //showColumns: true,                  //是否显示所有的列
        showRefresh: true,                  //是否显示刷新按钮
        // minimumCountColumns: 2,             //最少允许的列数
        //height: 500,                      //行高,如果没有设置height属性,表格自动根据记录条数决定表格高度
        classes: "table table-bordered table-striped table-condensed table-hover",
        //showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
        columns: columns,                   //列参数
        //detailView: true,                  //是否显示父子表
        //得到查询的参数,会在url后面拼接,如:?rows=5&page=2&sortOrder=asc&search_kw=&_=1564105760651
        queryParams: function (params) {
            // params对象包含:limit, offset, search, sort, order
            //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
            var temp;
            temp = {
                page: (params.offset / params.limit) + 1,   //页码,  //页码
                size: params.limit   //页面大小
                //查询框中的参数传递给后台
                //search_kw: $('#search-keyword').val(), // 请求时向服务端传递的参数
            };
            return temp;
        }
    });

搜索框位置

默认搜索框靠右,通过searchAlign属性可以跳转位置,left搜索框在左边 right在右边

代码语言:javascript
复制
searchAlign: "left",

匹配方式

searchText 设置初始化时默认关键字

代码语言:javascript
复制
searchText: '上海-悠悠',

strictSearch 设置匹配方式,默认是模糊匹配,设置为true 就是完全匹配模式

代码语言:javascript
复制
strictSearch: true,

trimOnSearch 去除关键词左右两边的空格

代码语言:javascript
复制
trimOnSearch: true,

删除清空按钮

showSearchClearButton 属性设置为true,可以显示清空输入框按钮

代码语言:javascript
复制
showSearchClearButton: true,       //清空输入框

自定义搜索方法

自定义搜索,比如只搜索ID字段

代码语言:javascript
复制
customSearch:customSearch,//自定义搜索,比如只搜索ID字段
 });
    function  customSearch(data, text) {
    return data.filter(function (row) {
      return (row.Id+"").indexOf(text) > -1
    })

参考资料:https://www.itxst.com/Bootstrap-Table/i3yqb332.html 在线实例: https://debug.itxst.com/js/b3efzmzu

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2022-01-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 从零开始学自动化测试 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • bootstrap table 查询搜索配置
  • 开启搜索框
  • 搜索框位置
  • 匹配方式
  • 删除清空按钮
  • 自定义搜索方法
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档