Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use the bootstrap-table plug-in to achieve the query function. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Realize the idea of query:

1. Define a Toolbar on the left of the bureau that contains new, save, and new buttons

two。 Define a local right QueryForm that contains query conditions and query clear buttons

3. Define a Table

The implementation is as follows:

Query function implementation

Idea: get all the objects in the query block and store them in the parameters returned by the query dynamically

It should be noted that:

When the query has no value, it cannot be put into the query parameters, otherwise the data will be queried as empty, resulting in the data cannot be queried.

Function queryParams (params) {var param = {}; $('# query-form'). Find ('[name]') .each (function () {var value = $(this). Val (); if (value! ='') {param [$(this) .attr ('name')] = value;}}); param [' pageSize'] = params.limit / / Page size param ['pageNumber'] = params.offset; / / Page number return param;} function customSearch (text) {$table.bootstrapTable (' refresh'); / / Refresh Table,Bootstrap Table automatically performs a re-query}

Implementation of reset function

Implementation idea: get the control of query-form in a loop and leave its value empty

Function resetSearch () {$('# query-form') .find ('[name]') .each (function () {$(this) .val ('');}) } this is the end of the article on "how to use the bootstrap-table plug-in to achieve query function". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.