基于Handlebars的JavaScript表格渲染组件

作者：青柠

时间：2026-10-30

本文介绍一个基于Handlebars模板引擎的JavaScript表格渲染组件。该组件封装了分页、搜索、删除及AJAX请求等常用功能，通过配置构造函数参数即可快速集成。文章提供了HTML结构、Handlebars模板及JS调用示例，并详细解析了构造函数与init方法的参数设置，帮助开发者高效实现动态表格展示。

文章目录

组件简介与源码地址

这是一个用于渲染表格的JavaScript组件。演示地址为http://lovewebgames.com/jsmodule/table.html，源代码托管在https://github.com/tianxiangbing/table。

如上图所示，该组件涵盖了表格开发中常见的功能，包括分页、搜索、数据删除以及AJAX异步请求。由于采用Handlebars进行渲染，样式控制较为灵活，且扩展新功能也相对便捷。

功能特性与调用示例

以下是具体的调用示例。

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>

Handlebars模板定义。


<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>

JavaScript逻辑实现。


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

构造函数与参数详解

组件提供的属性和方法说明。构造函数签名：constuctor:function(table, temp, page, param, search, callback, filterCon)

构造函数用于初始化组件。参数table指定存放表格的容器，可以是空的div元素，也可以是table元素内的tbody节点；temp参数指代表格的Handlebars模板，即script节点的jQuery对象；page参数指定放置分页控件的容器；param为JSON类型的初始化参数；search参数指定搜索按钮的DOM节点，要求该节点的祖先级中存在class为form的节点，组件将利用插件格式化表单数据作为查询参数发起请求；callback为数据加载完成后的回调函数；filterCon用于指定筛选过滤逻辑。