dataTables插件的使用记录

这次倒腾dataTables库花费了我两天多时间，中文文档不完整，英文文档看不下去，啊啊，要提升英文阅读能力啊~~~

1. dataTables简介：

dataTables是用jquery写的一个动态交互型表格插件，可支持排序，自动分页（前后端分页）等涉及到表格的动作事件。

2. 使用记录

这次是在Flask框架中的前端使用了ace框架，然后在其中引入使用了dataTables框架。

(1) 首先，在前端HTML页面中：定义好表格头：

<div>
  <table id='table_dynamic'>
      <thead>
          <tr>
            <th> <span>ID</span> </th>
            <th>配置路径</th>
            <th>检查类型</th>
            <th>检查项</th>
            <th>检查结果</th>
          </tr>
      </thead>
  </table>
</div>

然后在同一个页面的JS中定义处理逻辑：

<script type='text/javascript'>
jQuery(function($){
    var myTable = $('#table_dynamic').DataTable({
        ordering:true,
        searching:false,
        processing:true,  //must for 后端数据库分页
        serverSide:true,  // must for 后端数据库分页
        ajax:{
            url:'/bvs/ajax/get_result' + {{ taskid }},
            type:'post',
            dataSrc:function(r){  // 后端返回的数据，必须为json格式
                return r['data_c'];
            }
            //如果要向后端传递自己自定义的数据，需要定义  `data`字段
        }，
        columns:[
           {data:'id', width:'5%'}, {data:'file_path', width:'15%'}, {data:'chktype', width:'10%'},  {data:'chkitem', width:'10%'}, 
           {data:'chkres', 
            width:'10%', 
            render:function(data){
                if(data == 'y'){
                    return "<span class='label-success'>"+data+"</span>"
                }
                else
                    return "<span class='label-dangers'>"+data+"</span>"
            }
            sortable:true
           }
        ]
    })
})
</script>

然后在后端的Python接口(bvs.py)中：

#这个接口是flask需要返回的template接口，顺便返回简单数据
@app.route('/get_bvstask/<taskid>', methods=['GET', 'POST'])
def get_result(taskid):
   if "logged_in" in session and session.get('loggend_in'):
      date = taskid.split['_'][1][:6]
      offset = request.form.get('start')
      page_num = request.form.get('length')  
      # 上面的`start`和`length`是dataTables框架自己传过来的
      try:
          res = DB().get_result(date, taskid)
      except BaseException, e:
           print "Read data from DB error"
      else:
          time = res[0].time
          type = res[0].tasktype
          return render_template('taskresult.html', taskid=taskid, time=time, task_type=type)
    else:
       return redirect(url_for('soc_user.login'))

@app.route('/ajax/get_result/<taskid>', methods=['GET', 'POST'])
def get_task(taskid):
      date = taskid.split['_'][1][:6]
      offset = request.form.get('start')
      page_num = request.form.get('length')  
      # 上面的`start`和`length`是dataTables框架自己传过来的
      try:
          res_current = DB().get_result_current(date, taskid, offset, page_num)  # 查询返回当前页面需要的数据，对应于postgresql，即('page_num'=`limit` 与'offset'=`offset`)
          res_total = DB().get_result(date, taskid)
      except BaseException, e:
           print "Read data from DB error"
           return None
      else:
          len_data = len(res_total)
          res_json = json.dumps({
              'data_c':res_current,  # 前端dataSrc需要拿到的值
              'recordsTotal':len_data,  # 默认接口，当前总数
              'recordsFiltered':len_data  #默认接口，如果前端需要过滤则另定义，比如前端选择男或者女
          })
          return res_json  # 给前端动态渲染的表格数据必须是json格式

3. 以上，即基本的使用dataTables的用法，结合flask框架与ace模板，能够比较强大地展现数据并符合基本工作要求。dataTables很强大，还有很多值得再研究的地方，待续。

4. dataTables有一个比较麻烦的问题是，两种接口格式，需要注意。