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
        })
      }

  • 相关阅读:
    百度贴吧营销实战之推广入口布局技巧
    微信加人限制2017版
    百度经验怎么赚钱之练就三星经验,轻松布局流量入口。
    百科词条 如何创建?客源何在?怎么赚钱?
    人物百科 从词条创建到最终盈利(简剖)
    百度文库营销技巧之文库不为人知的通过率 以及排名推广技巧
    百度知道一周练就5级账号(养号系列一)
    百度知道账号,快速升级必备36计(养号系列二)
    QQ运动,新楛的马桶还在香,营销人不应摒弃。
    裂变营销 流量分散年代 你那样的不可或缺
  • 原文地址:https://www.cnblogs.com/666boyun/p/14209709.html
Copyright © 2011-2022 走看看