Rendering component of javascript table_javascript skills

For the rendering component of the table, please click http://lovewebgames.com/jsmodule/table.html for demo, and for git source code, please click https://github.com/tianxiangbing/table

As shown in the picture above, the functions basically include paging, search, deletion, and AJAX operations encountered in commonly used forms. Since it is rendered using HANDLEBARS, the style can be easily controlled, and it is easier to add new functions.

Call example

html

<div class="form">
  名称: <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">序号</th>
          <th>商品条码</th>
          <th>商品名称</th>
          <th>状态</th>
          <th>操作</th>
      </tr>
    </thead>
    <tbody>
      {{#each data}}
      <tr>
          <td class="first-cell">{{@index}}</td>
          <td>{{goods_bn}}</td>
          <td>{{goods_name}}</td>
          <td>上架</td>
          <td><a class="js-ajax" js-ajax-param="id={{goods_id}}" href="action.json">下架</a> <a class="js-delete" href="action.json">删除</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 stores the table, which can be an empty div or a tbody in the table;
Temp refers to the template of the table, here is the jquery object of the script node
page needs to be a container for placing paging controls
param initialization parameter type json
search Search button node. There must be a node with class form in your ancestor level. You will use [query](https://github.com/tianxiangbing/query) to format the parameters inside. Query data operation
callback callback after loading
filterCon filter filter

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

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