Layui data table implements the function of reloading data table (search function)

Layui data table implements the function of reloading data table, taking the search function as an example

Loading data tables
Implement search function and data table reloading
All codes

Loading data tables

Follow the official document example of Layui

HTML part

<table  lay-filter="test"></table>

JavaScript Part

var table = ;
 
//Perform rendering({
 elem: '#demo' //Specify the original table element selector (recommended id selector) ,height: 315 //Container height ,cols: [{}] //Set the table header //,... //For more parameters, refer to the right directory: Basic parameter options});

The official documentation has already explained the method very clearly. The following shows the usage of the examples (the HTML part is in accordance with the official documentation and does not need to be modified)

('table', function () {
    var table = ;

    ({
      // Table container ID      elem: '#ware_info'
      // The table ID must be set, and the overloaded part needs to be used      , id: 'tableOne'
      // Data interface link      , url: "Async request data interface address"
      // Additional parameters, post token      , where: {'token': token}
      , method: 'post'
      // Pagination curr start page, groups continuously display page numbers, default number of pieces displayed per page      , page: {
        layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
        , curr: 1
        , groups: 6
        , limit: 20
      }
      , cols: [[
        {fixed: 'lift', title: 'Serial number', type: 'numbers', minWidth: 60, align: 'center',}
        , {field: 'part', title: 'type', align: 'center', width: 120}
        , {field: 'uid', title: 'UID', align: 'center', width: 200, sort: true, event: 'details', style: 'color: #0066CC; cursor:pointer;'}
        , {field: 'quantity', title: 'quantity', width: 120, align: 'center', event: 'setNumber', style: 'color: #0066CC; cursor:pointer;'}
        , {field: 'description', title: 'describe', align: 'center', minWidth: 80}
        , {field: 'disable', title: 'state', sort: true, width: 80, align: 'center',}
      ]]
    });
  });

Implement search function and data table reloading

1. Interface requirements
There is a data interface that can receive search conditions and return fixed format json files.

2. Pay attention to importing the dependent module of layui in advance

Part of JavaScript code is as follows:

// Perform search, table overload  $('#do_search').on('click', function () {
    // Search criteria    var send_name = $('#send_name').val();
    var send_data = $('#send_data').val();
    ('tableOne', {
      method: 'post'
      , where: {
        'token': token,
        'send_name': send_name,
        'send_data': send_data,
      }
      , page: {
        curr: 1
      }
    });
  });

All codes

HTML part

<table class="layui-hide"  lay-filter="tableOne"></table>

JavaScript Part

// Load the table  ('table', function () {
    var table = ;

    ({
      // Table container ID      elem: '#ware_info'
      // The table ID must be set, and the overloaded part needs to be used      , id: 'tableOne'
      // Data interface link      , url: "Your asynchronous data interface address"
      // Additional parameters, post token      , where: {'token': token}
      , method: 'post'
      // Pagination curr start page, groups continuously display page numbers, default number of pieces displayed per page      , page: {
        layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
        , curr: 1
        , groups: 6
        , limit: 20
      }
      , cols: [[
        {fixed: 'lift', title: 'Serial number', type: 'numbers', minWidth: 60, align: 'center',}
        , {field: 'part', title: 'type', align: 'center', width: 120}
        , {field: 'uid', title: 'UID', align: 'center', width: 200, sort: true, event: 'details', style: 'color: #0066CC; cursor:pointer;'}
        , {field: 'quantity', title: 'quantity', width: 120, align: 'center', event: 'setNumber', style: 'color: #0066CC; cursor:pointer;'}
        , {field: 'description', title: 'describe', align: 'center', minWidth: 80}
        , {field: 'disable', title: 'state', sort: true, width: 80, align: 'center',}
      ]]
    });

    // Perform search, table overload    $('#do_search').on('click', function () {
      // Search criteria      var send_name = $('#send_name').val();
      var send_data = $('#send_data').val();
      ('tableOne', {
        method: 'post'
        , where: {
          'csrfmiddlewaretoken': token,
          'send_name': send_name,
          'send_data': send_data,
        }
        , page: {
          curr: 1
        }
      });
    });

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.