zoukankan      html  css  js  c++  java
  • bootstrap table查询搜索配置

    bootstrap table查询搜索配置

    bootstrap table查询搜索指的是表格内容前端搜索,而不是查询数据库进行搜索,如果要对数据库服务端进行搜索可以queryParams属性相对应的教程。bootstrap table表格搜索可以通过以下属性进行设置。

    属性名称 说明
    search true 开启搜索输入框
    searchOnEnterKey true 回车后执行搜索
    strictSearch true 完全匹配搜索,不是like模糊查询
    trimOnSearch true 自动去除关键词两边空格
    searchAlign left/right left搜索框在左边 right在右边
    searchTimeOut 1000 设置搜索超时时间,数据量很大时才有用
    searchText 字符串 初始化时默认搜索的关键词
    customSearch 自定义方法 自定义搜索

    search开启搜索框

    //bootstrap table初始化数据//
    $('#table').bootstrapTable({
      columns: columns,
      data: getData(),
      classes: "table table-bordered table-striped table-sm table-dark", 
      height:400,
      //******开启搜索框****//
      search:true
     });

    searchOnEnterKey回车后执行搜索

    //bootstrap table初始化数据//
    $('#table').bootstrapTable({
      columns: columns,
      data: getData(),
      classes: "table table-bordered table-striped table-sm table-dark", 
      height:400,
      search:true, //******开启搜索框****//
      searchOnEnterKey:true, //******回车后执行搜索****//
     });

       在线试一试

    strictSearch完全匹配

    //bootstrap table初始化数据//
    $('#table').bootstrapTable({
      columns: columns,
      data: getData(),
      classes: "table table-bordered table-striped table-sm table-dark", 
      height:400,
      search:true, //******开启搜索框****//
      searchOnEnterKey:false, //******回车后执行搜索****//
      strictSearch:true  //******完全匹配****//
     });

    trimOnSearch去除关键词空格

    //bootstrap table初始化数据//
    $('#table').bootstrapTable({
      columns: columns,
      data: getData(),
      classes: "table table-bordered table-striped table-sm table-dark", 
      height:400,
      search:true, //******开启搜索框****//
      searchOnEnterKey:false, //******回车后执行搜索****//
      strictSearch:true,  //******完全匹配****//
      trimOnSearch:true //去除关键词空格//
     });

    searchAlign搜索框位置

    //bootstrap table初始化数据//
    $('#table').bootstrapTable({
      columns: columns,
      data: getData(),
      classes: "table table-bordered table-striped table-sm table-dark", 
      height:400,
      search:true, //******开启搜索框****//
      searchOnEnterKey:false, //******回车后执行搜索****//
      strictSearch:true,  //******完全匹配****//
      trimOnSearch:true, //去除关键词空格//
      searchAlign:"left"
     });

    searchText默认搜索关键词

    //bootstrap table初始化数据//
    $('#table').bootstrapTable({
      columns: columns,
      data: getData(),
      classes: "table table-bordered table-striped table-sm table-dark", 
      height:400,
      search:true, //******开启搜索框****//
      searchOnEnterKey:false, //******回车后执行搜索****//
      strictSearch:true,  //******完全匹配****//
      trimOnSearch:true, //去除关键词空格//
      searchAlign:"left",
      searchText:"苹果"
     });

    customSearch自定义搜索

    //bootstrap table初始化数据//
    $('#table').bootstrapTable({
      columns: columns,
      data: getData(),
      classes: "table table-bordered table-striped table-sm table-dark", 
      height:400,
      search:true, //******开启搜索框****//
      searchOnEnterKey:false, //******回车后执行搜索****//
      strictSearch:true,  //******完全匹配****//
      trimOnSearch:true, //去除关键词空格//
      searchAlign:"left",
       customSearch:customSearch,//自定义搜索,比如只搜索ID字段
     });
        function  customSearch(data, text) {
        return data.filter(function (row) {
          return (row.Id+"").indexOf(text) > -1
        })
      }

  • 相关阅读:
    SQL查询效率100w数据查询只要1秒
    超级实用且不花哨的js代码大全 (四) JavaScript[对象.属性]集锦
    Sql Server实用操作维护小技巧集合
    asp.net截取字符串方法
    自己整理的asp.net 缓存 相关资料
    【译】初识SSRS 通向报表服务的阶梯系列(一)
    【译】无处不在的数据 通向报表服务的阶梯系列(三)
    【译】SSRS基础 通向报表服务的阶梯系列(二)
    浅谈SQL Server中的事务日志(三)在简单恢复模式下日志的角色
    SQL Server中生成测试数据
  • 原文地址:https://www.cnblogs.com/666boyun/p/14209709.html
Copyright © 2011-2022 走看看