layui数据表格前端搜索

前端搜索

代码中有注释

$('#app').on('input', '#table-search-input', function (e) {
      console.log('e', e)
      isSearchInput = true
      if ((!e.target.isNeedPrevent)) reloadTable(isFrontSearch)
    })
      .on('compositionstart', '#table-search-input', function (e) {
        e.target.isNeedPrevent = true
      })
      .on('compositionend', '#table-search-input', function (e) {
        e.target.isNeedPrevent = false;
        reloadTable(isFrontSearch)
      })
      .on('click', '#table-search-input', function (e) {
        isSearchInput = true
      })
      .on('blur', '#table-search-input', function (e) {
      })

    function reloadTable(isFront) {
      let piao_list = []
      var search = $('#table-search-input').val()
      console.log(search, cdata)
      $.each(cdata, function (i, row) {
        console.log(i, row)
        var isSearchInRow = 0
        $.each(row, function (j, column) {
          console.log(j, column)
          if (column != null) {
            if (column.toString().indexOf(search) > -1) {
              isSearchInRow = 1;
              return false;
            }
          }
        })
        if (isSearchInRow == 1) {
          piao_list.push(row)
          console.log(piao_list)
        }
      })
      table.render({
        elem: '#LAY_table_user'
        , toolbar: '#toolbarBox'
        , defaultToolbar: ['filter']
        , data: piao_list
        , page: true
        , limit: 100
        , cols: [cols]
        , height: "full-100"
        , limits: [100, 200, 300, 400]
      });
      $('#table-search-input').val(search) //表格重载后搜索框赋值
      if (true == isSearchInput) { }
      $('#table-search-input').focus() //搜索框获得焦点
    }

后端接口搜索

只需把上面代码中 $.each 部分换成你的搜索方法就行

最重要的是这两句，注意放在表格重置之后

$('#table-search-input').val(search) //表格重载后搜索框赋值
$('#table-search-input').focus()  //搜索框获得焦点