Javascript table Rendering component, javascript table Rendering

Javascript table Rendering component, javascript table Rendering

Table Rendering component. For demo, click render.

As shown in, the basic functions include paging, search, deletion, and AJAX operations in common tables. Because HANDLEBARS is used for rendering, style may be well controlled and it is easier to add new functions.

Call example

Html

<Div class = "form"> Name: <input type = "text" name = "gname"> <a href = "#" id = "search"> search </a> </div> <div id =" tab-list "ajaxurl =" list. json "> loading... </div> <div id = "pager"> </div>

Template

<Script type = "text/x-handlebars-template" id = "tpl-list"> <table class = "tab-list"> <thead> <tr> <th class = "first-cell"> NO. </th> <th> item Bar Code </th> <th> item name </th> <th> Status </th> <th>> operation </th> </tr> </thead> <tbody >{{# each data }}< tr> <td class = "first-cell"> {{@ index }}</td> <td >{{ goods_bn }}</td> <td >{{ goods_name }}</td> <td> mounting </td> <td> <a class = "js-ajax" js-ajax-param = "id = {goods_id}" href = "action. json "> dismounting </a> <a class =" js-delete "href =" action. json "> Delete </a> </td> </tr >{{/ each }}</tbody> </table> </script>

Js

<script>  var table = new Table($('#tab-list'), $('#tpl-list'), $('#pager'), {}, $('#search'));  table.init({type:'post'});</script>

Attributes and Methods
Constuctor: function (table, temp, page, param, search, callback, filterCon)

A constructor. A table is a table container. It can be an empty div or a tbody in a table;
Temp refers to the template of the table. Here is the jquery object of the script node.
Container for page control
Parameter type json In param Initialization
Search button node, your ancestor level to have a class form node, will use [query] (https://github.com/tianxiangbing/query) format inside as a parameter, query data operations
Callback after callback is loaded
FilterCon Filtering

Init: function (settings)
Init is the startup method. The current settings only contain the type of the {type: 'get'} ajax request.

The above is all the content of this article. I hope you will like it.