JavaScript table rendering Components _javascript Tips

The rendering component of the table, demo please click Http://lovewebgames.com/jsmodule/table.html,git Source code please click Https://github.com/tianxiangbing/table

As shown in the figure above, features basically include paging, searching, deleting, and AJAX operations that are encountered in common tables. Because it is handlebars rendered, the style may be well controlled and it is easier to add new features.

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" > Serial number </th>
          <th> product barcode </th>
          <th> Product 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> Shelves </td>
          <td><a class= "Js-ajax" Js-ajax-param= "id={{goods_id}}" href= "Action.json" > Shelves </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>

Properties and Methods
Constuctor:function (table, temp, page, param, search, callback, Filtercon)

constructor, table refers to the container that holds the table, can be an empty div, or it can be a tbody in the table;
Temp refers to the template of the table, which is the jquery object of the script node
The page needs to place a container for the paging control
Param Initialization band parameter type JSON
Search button node, your ancestor level to have a class for form node, will use [query] format inside as parameters, query data Operation Https://github.com/tianxiangbing/query
Callback-Loaded callback
Filtercon Filter Filter

Init:function (Settings)
Init is the startup method and the current settings contain only {type: ' Get '}, type of Ajax request

The above mentioned is the entire content of this article, I hope you can enjoy.