From 70be0a8f5eaf2cf878b9cab683c21c583159a789 Mon Sep 17 00:00:00 2001
From: kawaiiQ <597405815@qq.com>
Date: Thu, 23 Feb 2017 20:18:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E5=A4=B4=E6=8D=A2=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 LICENSE            |  28 +-
 README.md          | 245 +++++++------
 sat.core.js        | 860 +++++++++++++++++++++++++++++++++++++++++++++
 sat.drf.js         |  60 ++++
 simpleAjaxTable.js | 305 ----------------
 5 files changed, 1088 insertions(+), 410 deletions(-)
 create mode 100644 sat.core.js
 create mode 100644 sat.drf.js
 delete mode 100644 simpleAjaxTable.js

diff --git a/LICENSE b/LICENSE
index b53523c..86cc6a7 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,8 @@
-MIT License
+The Star And Thank Author License (SATA)
 
-Copyright (c) 2017 Kong Weiyi
+Copyright © 2017 _kawaiiQ(597405815@qq.com)
+
+Project Url: https://github.com/kawaiiQ/sdust-online-judge
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -9,13 +11,27 @@ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+And wait, the most important, you shall star/+1/like the project(s) in project url
+section above first, and then thank the author(s) in Copyright section.
+
+Here are some suggested ways:
+
+ - Email the authors a thank-you letter, and make friends with him/her/them.
+ - Report bugs or issues.
+ - Tell friends what a wonderful project this is.
+ - And, sure, you can just express thanks in your mind without telling the world.
+
+Contributors of this project by forking have the option to add his/her name and
+forked project url at copyright and project url sections, but shall not delete
+or modify anything else in these two sections.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
\ No newline at end of file
diff --git a/README.md b/README.md
index c812d65..6db54be 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
 # Simple AJAX Table
 
-简（~~陋~~）单的AJAX表格，支持简单的搜索、筛选、分页、排序功能。
+简（~~陋~~）单的AJAX表格，支持简单的搜索、筛选、分页功能，并可添加链接到创建页面的创建按钮。
+
+现已将原来辣眼睛的代码重构，现版本改动较大，说明持续更新中。
 
 # 依赖
 
@@ -14,6 +16,12 @@
 
 # 使用
 
+## 引用文件
+
+引用目录中“sat.core.js”文件即可。
+
+另外，sat.drf.js提供了适配Django REST Framework后台的适配器，默认提供了requestGenerator和datdataGenerator方法。如果需要使用，请在“sat.core.js”之后引用。
+
 ## 生成表格
 
 在引用simpleAjaxTable.js后，在需要引入表格的地方添加div标签：
@@ -25,7 +33,7 @@
 在JavaScript脚本中执行：
 
 ```
-simpleAjaxTable.init(tableInfo)
+SATable.init(tableInfo)
 ```
 
 其中tableInfo为包含表格参数的键值对集合。
@@ -46,7 +54,21 @@ simpleAjaxTable.init(tableInfo)
 
     表格的标题。
 
-* column
+* search
+
+    类型：Boolean
+
+    表格是否支持搜索，如为真，则表格将显示搜索框。
+
+    **可选**，目前搜索仅支持单一搜索框。
+
+* createURL
+
+    类型：String
+
+    **可选**，如设置此项，则表格将显示创建按钮，点击后将跳转至字符串中设定的URL地址。
+
+* columns
 
     类型：Array
 
@@ -54,43 +76,56 @@ simpleAjaxTable.init(tableInfo)
 
     列的参数有：
 
-    * name：
-    
-        类型：String
-
-        列的名字，将获得的数据填入表格时将使用此名称识别数据应当填入哪一列。
-
-    * caption：
+    * name
 
         类型：String
     
+        列的名字，将获得的数据填入表格时将使用此名称识别数据所属于的列。
+
+    * caption
+    
+        类型：String
+
         显示在表头上的列的名字。
 
-    * sort：
+    * type
+    
+        类型：String
         
-        类型：Boolean
+        此列的数据为何等类型的数据，可选项为：
+
+            * Datetime：数据为日期时间，数据填入表格时将自动转换为本地时间格式。
 
-        该列是否支持排序。
+            * Boolean：数据为布尔值，数据填入表格时将自动转换为“√”或“×”。
 
-        表格生成后，可点击表头各列右方的按钮切换排序方式。目前，排序仅支持按照列从左到右的优先度按照指定的方式进行排序。
+            * Text：数据为文本，数据填入表格时将不加处理直接填入文本。
 
-    * ordering：
+            * Link：数据为超链接，点击后能够跳转到详情页面，此类型数据需要给出附加信息，见typeInfo项。
     
-        类型：数字
-        
-        如果该列支持排序，则需要设定默认排序的方式：
+    * typeInfo
+
+        类型：键值对集合
+
+        对于某些特殊类型的数据，需要给出附加信息以便数据填入表格时能够按预期形式填入。
+
+        * Link类型的数据
 
-        * -1：降序
+            对于Link类型的数据，目前支持以“基地址/主键/”的形式指定超链接。
 
-        * 0：不排序
+            * base_url
+
+                类型：String
+
+                基地址。
+            
+            * key
 
-        * 1：升序
+                类型：String
 
-    * type：可选，如果需要对列的数据进行处理，可添加此参数，目前支持的类型：
+                主键来源于哪一列的数据，需要是columns中某一列的name值。
 
-        * "datetime"：将数据中的时间转换为本地时间格式
 
-* filter
+* filters
 
     类型：Array
 
@@ -98,63 +133,73 @@ simpleAjaxTable.init(tableInfo)
 
     目前筛选的表单仅支持input标签，参数基本为对input标签的设置。
 
-    * name：即input的name参数，用于生成请求时使用的也是此名
+        * name：即input的name参数，用于生成请求时使用的也是此名
 
-    * type：即input的type参数
+        * type：即input的type参数
 
-    * placeholder：即input的placeholder参数
+        * placeholder：即input的placeholder参数
 
-    * caption：显示在输入框左侧标签的参数
+        * caption：显示在输入框左侧标签的参数
 
 * requestGenerator
 
     类型：Function
     
     目前，Simple AJAX Table不能自动生成完整的AJAX请求，使用时需要给出处理的函数，以生成AJAX请求所需的部分参数。
+    
+    （对于Django REST Framework搭建的后台API，目前以提供适配器提供requestGenerator方法。）
 
     requestGenerator为生成请求各参数的函数，格式如下：
 
     ```
-    function(limit, page, filter, search, ordering)
+    function(requestData) {
+      // TO DO ...
+    }
     ```
 
     * 输入：
 
-        * limit：
-
-            类型：数字
+        * requestData
 
-            每页显示的结果数量
+            类型：键值对集合
 
-        * page：
+            请求的具体内容，包含如下键值对：
 
-            类型：数字
+            * filters
 
-            显示第几页的结果
+                类型：键值对集合
 
-        * filter：
+                需要筛选的信息。
+                
+                键为需要筛选的字段名，是columns中需要过滤的列的name值。
+                
+                值为筛选值，应只显示指定字段为筛选值的结果。
+            
+            * search
 
-            类型：键值对集合
+                类型：String
 
-            筛选信息，为包含筛选信息的键值对，其中键为表格参数filter中的name，值为该筛选项的值
+                要搜索的内容。
 
-        * search：
+            * ordering
 
-            类型：String
+                类型：Array
 
-            目前仅支持搜索单一项
+                要排序的字段，按表格从左到右的顺序给出。
 
-            此参数为字符串，为搜索的信息
+                Array内部均为String类型对象，为columns中需要排序的列的name值，如果是正序直接给出，如果为倒序，则前面会加上‘-’符号。例如，“ID”需要正序则为“ID”，倒序则为“-ID”。
+            
+            * limit
 
-        * ordering：
+                每页显示多少行数据。
 
-            类型：Array
+            * page
 
-            其中元素为字符串，为需要排序的列的name。Simple AJAX Table给出的ordering数组按照从左至右的排序优先度从高到低的顺序给出，然而，你完全可以自由处理这些数据。
-    
+                显示第几页数据。
+                
     * 返回值：
 
-        函数的返回值应为配置AJAX请求的键值对集合，和jQuery的ajax方法同名的参数相同，如下：
+        函数的返回值应为配置AJAX请求的键值对集合，和jQuery的ajax方法同名的参数相同，需要且只需要提供：
 
         * type：请求的类型
 
@@ -178,7 +223,7 @@ simpleAjaxTable.init(tableInfo)
 
     * 输入：
 
-        * ret：AJAX请求返回的数据的js对象
+        * ret：AJAX请求从服务器返回的数据。
 
     * 返回值：
 
@@ -190,75 +235,77 @@ simpleAjaxTable.init(tableInfo)
             
             结果的数量（可选）
 
-        * results
+        * data
 
             类型：Array
 
-            表格数据，数组中元素为包含表格一行信息的键值对集合，键为表格参数column中列参数的name，值即为此行此列的值。
+            表格数据，数组中每一个对象都是包含表格一行信息的键值对集合，键为表格参数column中列参数的name，值即为此行此列的值。
+
+            数组中数据将从前之后在表格中从上至下填入。
 
 # 举个栗子
 
 这是一个获得题目列表的例子，通过Simple AJAX Table请求[Django REST Framework](http://www.django-rest-framework.org)搭建的某后台并将结果显示到表格中。
 
+这里仅为示意，故省去了requestGenerator，dataGenerator的具体实现，详细可参见sat.drf.js中的实现。
+
 ## HTML
 
 ```
 <div id="problem"></div>
 ```
 
-## JavaScript
+## JavaScript（使用sat.core.js）
 
 ```
-simpleAjaxTable.init({
-  id: "problem",
-  title: "题目列表",
-  column: [
-    { name: "id", caption: "ID", sort: true, ordering: 1 },
-    { name: "title", caption: "标题", sort: true, ordering: 0 },
-    { name: "introduction", caption: "简介", sort: true, ordering: 0 },
-    { name: "create_time", caption: "创建时间", type: "datetime", sort: true, ordering: 0 },
-    { name: "update_time", caption: "更新时间", type: "datetime", sort: true, ordering: 0 }
+SATable.DRFTable({
+  id: 'problem',
+  title: '题目',
+  search: true,
+  filters: [
+    { name: 'creator', type: 'text', placeholder: '请输入创建者用户名', caption: '创建者' },
+    { name: 'updater', type: 'text', placeholder: '请输入更新者用户名', caption: '更新者' }
   ],
-  filter: [
-    { name: "creator", type: "text", placeholder: "用户名", caption: "创建者" },
-    { name: "updater", type: "text", placeholder: "用户名", caption: "更新者" }
+  columns: [
+    { name: 'id', caption: 'ID', sort: true, ordering: 1, type: 'Link', typeInfo: { base_url: '/home/', key: 'id' } },
+    { name: 'title', caption: '标题', sort: true, type: 'Link', typeInfo: { base_url: '/home/', key: 'id' } },
+    { name: 'available', caption: '对外可用', type: 'Boolean' },
+    { name: 'create_time', caption: '创建时间', sort: true, type: 'Datetime' },
+    { name: 'update_time', caption: '更新时间', sort: true, type: 'Datetime' },
   ],
-  requestGenerator: function(limit, page, filter, search, ordering) {
-    var url = "/problems/"
-    var requestData = {
-      search: search,
-      limit: limit,
-      offset: (page - 1) * limit
-    }
-    for(var i in filter) {
-      requestData[i] = filter[i]
-    }
-    var o = ""
-    var first = true
-    for(var i in ordering) {
-      if(first) {
-        first = false
-      } else {
-        o += ','
-      }
-      o += ordering[i]
-    }
-    requestData.ordering = o
-
-    return {
-      type: "get",
-      url: url,
-      dataType: "json",
-      data: requestData
-    }
+  createURL: '/',
+  requestGenerator: function(request) {
+    // SOME CODE ...
   },
-  dataGenerator: function(ret) {
-    results = ret.results
-
-    return {
-      count: ret.count,
-      results: ret.results
-    }
+  dataGenerator: function(data) {
+    // SOME CODE ...
   }
 })
+```
+
+## JavaScript（使用sat.drf.js）
+
+因为提供了默认的requestGenerator和dataGenerator方法，故无需自行实现方法。
+
+但由于requestGenerator并不知道表格的URL，因此在原表格基础上需要给出请求的URL，参见下面的例子。
+
+```
+SATable.DRFTable({
+  id: 'envs',
+  title: '题目',
+  url: '/problems/',
+  search: true,
+  filters: [
+    { name: 'creator', type: 'text', placeholder: '请输入创建者用户名', caption: '创建者' },
+    { name: 'updater', type: 'text', placeholder: '请输入更新者用户名', caption: '更新者' }
+  ],
+  columns: [
+    { name: 'id', caption: 'ID', sort: true, ordering: 1, type: 'Link', typeInfo: { base_url: '/home/', key: 'id' } },
+    { name: 'title', caption: '标题', sort: true, type: 'Link', typeInfo: { base_url: '/home/', key: 'id' } },
+    { name: 'available', caption: '对外可用', type: 'Boolean' },
+    { name: 'create_time', caption: '创建时间', sort: true, type: 'Datetime' },
+    { name: 'update_time', caption: '更新时间', sort: true, type: 'Datetime' },
+  ],
+  createURL: '/'
+})
 ```
\ No newline at end of file
diff --git a/sat.core.js b/sat.core.js
new file mode 100644
index 0000000..ee79d45
--- /dev/null
+++ b/sat.core.js
@@ -0,0 +1,860 @@
+var SATable = {}
+
+SATable.getFormData = function(form) {
+  var array = $(form).serializeArray()
+  var data = {}
+  for(var i in array) {
+    var it = array[i]
+    data[it.name] = it.value
+  }
+  return data
+}
+
+SATable.getDom = {}
+SATable.getDom.Br = function(class_) {
+  var br = $('<br/>')
+  if (class_) {
+    $(br).addClass(class_)
+  }
+  return br
+}
+SATable.getDom.Div = function(class_) {
+  var div = $('<div></div>')
+  if (class_) {
+    $(div).addClass(class_)
+  }
+  return div
+}
+SATable.getDom.Container = function(class_) {
+  classes = 'container'
+  if (class_) {
+    classes += ' ' + class_
+  }
+  return SATable.getDom.Div(classes)
+}
+SATable.getDom.RowBetween = function(class_) {
+  classes = 'row justify-content-between'
+  if (class_) {
+    classes += ' ' + class_
+  }
+  return SATable.getDom.Div(classes)
+}
+SATable.getDom.BtnGroup = function(class_) {
+  var div = SATable.getDom.Div('btn-group')
+  $(div).attr('role', 'group')
+  if (class_) {
+    $(div).addClass(class_)
+  }
+  return div
+}
+SATable.getDom.H2 = function(text, class_) {
+  var h2 = $('<h2></h2>')
+  if (text) {
+    $(h2).text(text)
+  }
+  if (class_) {
+    $(h2).addClass(class_)
+  }
+  return h2
+}
+SATable.getDom.H3 = function(text, class_) {
+  var h3 = $('<h3></h3>')
+  if (text) {
+    $(h3).text(text)
+  }
+  if (class_) {
+    $(h3).addClass(class_)
+  }
+  return h3
+}
+SATable.getDom.ButtonOutline = function(name, class_) {
+  var btn = $('<button type="button" class="btn btn-outline-primary"></button>')
+  if (name) {
+    $(btn).text(name)
+  }
+  if (class_) {
+    $(btn).addClass(class_)
+  }
+  return btn
+}
+SATable.getDom.Button = function(name, class_) {
+  var btn = $('<button type="button" class="btn btn-primary"></button>')
+  if (name) {
+    $(btn).text(name)
+  }
+  if (class_) {
+    $(btn).addClass(class_)
+  }
+  return btn
+}
+SATable.getDom.ButtonSubmit = function(name) {
+  var span = $('<span class="input-group-btn"></span>')
+  var btn = SATable.getDom.Button(name)
+  $(span).append(btn)
+  return span
+}
+SATable.getDom.A = function(name, href, class_) {
+  var a = $('<a></a>')
+  if (name) {
+    $(a).text(name)
+  }
+  if (href) {
+    $(a).attr('href', href)
+  }
+  if (class_) {
+    $(a).addClass(class_)
+  }
+  return a
+}
+SATable.getDom.AButton = function(name, href, class_) {
+  var a = SATable.getDom.A(name, 'javascript:void(0)', 'btn btn-primary')
+  if (href) {
+    $(a).attr('href', href)
+  }
+  if (class_) {
+    $(a).addClass(class_)
+  }
+  return a
+}
+SATable.getDom.Form = function(class_) {
+  var form = $('<form class="form" onsubmit="return false;"></form>')
+  if (class_) {
+    form.addClass(class_)
+  }
+  return form
+}
+SATable.getDom.Span = function(class_) {
+  var span = $('<span></span>')
+  if (class_) {
+    $(span).addClass(class_)
+  }
+  return span
+}
+SATable.getDom.Input = function(name, placeholder, class_) {
+  var input = $('<input type="text" class="form-control" name="'+name+'" placeholder="'+placeholder+'"/>')
+  if (class_) {
+    $(input).addClass(class_)
+  }
+  return input
+}
+SATable.getDom.InputText = function(name, caption, placeholder, class_) {
+  var div = SATable.getDom.Div('form-group row')
+  var label = $('<label class="col-md-3 col-form-label">' + caption + '</label>')
+  var divInput = SATable.getDom.Div('col-md-9')
+  var input = $('<input class="form-control" type="text" name="' + name + '"/>')
+  if (placeholder) {
+    $(input).attr('placeholder', placeholder)
+  }
+  $(divInput).append(input)
+  $(div).append(label).append(divInput)
+  if (class_) {
+    $(div).addClass(class_)
+  }
+
+  return div
+}
+SATable.getDom.InputSelect = function(name, caption, options, class_) {
+  var div = SATable.getDom.Div('form-group row')
+  var label = $('<label class="col-md-3 col-form-label">' + caption + '</label>')
+  var divInput = SATable.getDom.Div('col-md-9')
+  var select = $('<select class="form-control">')
+  if (name) {
+    $(select).attr('name', name)
+  }
+
+  for (var i in options) {
+    var it = options[i]
+    var option = $('<option></option>')
+    if (it.value) {
+      $(option).val(it.value)
+    }
+    if (it.text) {
+      $(option).text(it.text)
+    }
+    if (it.selected) {
+      $(option).attr('selected', 'selected')
+    }
+    $(select).append(option)
+  }
+
+  $(divInput).append(select)
+  $(div).append(label).append(divInput)
+  if (class_) {
+    $(div).addClass(class_)
+  }
+
+  return div
+}
+SATable.getDom.Nav = function(class_) {
+  var nav = $('<nav></nav>')
+  if (class_) {
+    $(nav).addClass(class_)
+  }
+  return nav
+}
+SATable.getDom.Ul = function(class_) {
+  var ul = $('<ul></ul>')
+  if (class_) {
+    $(ul).addClass(class_)
+  }
+  return ul
+}
+SATable.getDom.Li = function(class_) {
+  var li = $('<li></li>')
+  if (class_) {
+    $(li).addClass(class_)
+  }
+  return li
+}
+SATable.getDom.Table = function(class_) {
+  var table = $('<table class="table table-hover"></table>')
+  if (class_) {
+    $(table).addClass(class_)
+  }
+  return table
+}
+SATable.getDom.THead = function(class_) {
+  var tHead = $('<thead></thead>')
+  if (class_) {
+    $(tHead).addClass(class_)
+  }
+  return tHead
+}
+SATable.getDom.TBody = function(class_) {
+  var tBody = $('<tbody></tbody>')
+  if (class_) {
+    $(tBody).addClass(class_)
+  }
+  return tBody
+}
+SATable.getDom.Tr = function(class_) {
+  var tr = $('<tr></tr>')
+  if (class_) {
+    $(tr).addClass(class_)
+  }
+  return tr
+}
+SATable.getDom.Td = function(class_) {
+  var td = $('<td></td>')
+  if (class_) {
+    $(td).addClass(class_)
+  }
+  return td
+}
+SATable.getDom.Th = function(class_) {
+  var th = $('<th></th>')
+  if (class_) {
+    $(th).addClass(class_)
+  }
+  return th
+}
+SATable.getDom.IconLoading = function(class_) {
+  var icon = $('<i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>')
+  if (class_) {
+    $(icon).addClass(class_)
+  }
+  return icon
+}
+SATable.getDom.IconDown = function(class_) {
+  var icon = $('<i class="fa fa-chevron-circle-down fa-fw"></i>')
+  if (class_) {
+    $(icon).addClass(class_)
+  }
+  return icon
+}
+SATable.getDom.IconUp = function(class_) {
+  var icon = $('<i class="fa fa-chevron-circle-up fa-fw"></i>')
+  if (class_) {
+    $(icon).addClass(class_)
+  }
+  return icon
+}
+SATable.getDom.IconLast = function(class_) {
+  var icon = $('<i class="fa fa-angle-left"></i>')
+  if (class_) {
+    $(icon).addClass(class_)
+  }
+  return icon
+}
+SATable.getDom.IconNext = function(class_) {
+  var icon = $('<i class="fa fa-angle-right"></i>')
+  if (class_) {
+    $(icon).addClass(class_)
+  }
+  return icon
+}
+SATable.getDom.IconNoDirection = function(class_) {
+  var icon = $('<i class="fa fa-minus-circle fa-fw"></i>')
+  if (class_) {
+    $(icon).addClass(class_)
+  }
+  return icon
+}
+SATable.getDom.IconYes = function(class_) {
+  var icon = $('<i class="fa fa-check fa-fw"></i>')
+  if (class_) {
+    $(icon).addClass(class_)
+  }
+  return icon
+}
+SATable.getDom.IconNo = function(class_) {
+  var icon = $('<i class="fa fa-close fa-fw"></i>')
+  if (class_) {
+    $(icon).addClass(class_)
+  }
+  return icon
+}
+
+SATable.types = {}
+SATable.types.Boolean = function(content, column, info) {
+  return content ? SATable.getDom.IconYes : SATable.getDom.IconNo
+}
+SATable.types.Datetime = function(content, column, info) {
+  var date = new Date(content)
+  return date.toLocaleString()
+}
+SATable.types.Link = function(content, column, info) {
+  var typeInfo = column.typeInfo
+  var url = typeInfo.base_url + info[typeInfo.key] + '/'
+  return SATable.getDom.A(content, url)
+}
+SATable.types.Text = function(content, column, info) {
+  return content
+}
+
+SATable.InputType = {
+  'text': SATable.getDom.InputText
+}
+
+SATable.hasFilter = function() {
+  return this.filters.length > 0
+}
+
+SATable.hasSearch = function() {
+  return this.search
+}
+
+SATable.createFilterForm = function() {
+  var self = this
+  var getDom = SATable.getDom
+
+  var divContainer = getDom.Container('jumbotron bg-faded collapse')
+  var formFilter = getDom.Form()
+
+  for (var i in self.filters) {
+    var filter = self.filters[i]
+    var input = SATable.InputType[filter.type](filter.name, filter.caption, filter.placeholder)
+    $(formFilter).append(input)
+  }
+
+  var btnSubmit = getDom.ButtonSubmit('筛 选')
+
+  $(formFilter).append(getDom.Br()).append(btnSubmit)
+  $(divContainer).attr('id', self.tableIDs.filterDiv).append(formFilter)
+
+  self.dom.filter.form = formFilter
+  self.dom.filter.div = divContainer
+  self.dom.filter.submit = btnSubmit
+
+  $(btnSubmit).click(function() {
+    self.update()
+  })
+
+  return divContainer
+}
+
+SATable.createHead = function() {
+  var self = this
+  var getDom = SATable.getDom
+
+  var divBetween = getDom.RowBetween()
+
+  var divTitle = getDom.Div()
+  var h2Title = getDom.H2(self.title)
+  var divBtn = getDom.BtnGroup()
+  $(divTitle).addClass('col-6').append(h2Title)
+  if (self.hasFilter()) {
+    var btnFilter = getDom.ButtonOutline('筛选')
+    $(btnFilter).attr('data-toggle', 'collapse').attr('data-target', '#' + self.tableIDs.filterDiv)
+    $(divBtn).append(btnFilter)
+
+    self.dom.filter.button = btnFilter
+  }
+  if (self.createURL != null) {
+    var btnCreate = getDom.AButton('创建', 'javascript:void(0);')
+    $(divBtn).append(btnCreate)
+  }
+  $(divBetween).append(divTitle).append(divBtn)
+
+  return divBetween
+}
+
+SATable.createBarUp = function() {
+  var self = this
+  var getDom = SATable.getDom
+
+  var divBetween = getDom.RowBetween()
+  var divSearch = getDom.Div('col-md-5 col-sm-12')
+  var divPage = getDom.Div('col-md-6 col-sm-12')
+  $(divBetween).append(divSearch).append(divPage)
+
+  var nav = getDom.Nav()
+  var ul = getDom.Ul('pagination ' + self.tableIDs.pageClass)
+  $(nav).attr('style', 'float:right;').append(ul)
+  $(divPage).append(nav)
+
+  self.dom.pagination.up = {}
+  self.dom.pagination.up.div = divPage
+  self.dom.pagination.up.nav = nav
+  self.dom.pagination.up.ul = ul
+
+  if (self.search) {
+    var form = getDom.Form()
+    var divInput = getDom.Div('form-group row')
+    var divInput2 = getDom.Div('col-xs-12 input-group')
+    var input = getDom.Input('search', '搜索')
+    var span = getDom.Span('input-group-btn')
+    var button = getDom.Button('')
+    var i = $('<i class="fa fa-search"></i>')
+
+    $(button).append(i)
+    $(span).append(button)
+    $(divInput2).append(input).append(span)
+    $(divInput).append(divInput2)
+    $(form).append(divInput)
+    $(divSearch).append(form)
+
+    self.dom.search.form = form
+    self.dom.search.input = input
+    self.dom.search.submit = button
+
+    $(form).submit(function() {
+      self.update()
+    })
+    $(button).click(function() {
+      self.update()
+    })
+  }
+
+  return divBetween
+}
+
+SATable.getLimit = function() {
+  var self = this
+  var pageNumberData = SATable.getFormData(self.dom.pageNumber.form)
+  var pageNumber = pageNumberData.pageNumber
+  return pageNumber
+}
+
+SATable.createBarBottom = function() {
+  var self = this
+  var getDom = SATable.getDom
+
+  var divBetween = getDom.RowBetween()
+  var divPageNumber = getDom.Div('col-md-5')
+  var divPage = $(self.dom.pagination.up.div).clone(true)
+  $(divBetween).append(divPageNumber).append(divPage)
+
+  self.dom.pagination.bottom = {}
+  self.dom.pagination.bottom.div = divPage
+
+  var formPageNumber = getDom.Form()
+  var divSelect = getDom.InputSelect('pageNumber', '每页', [
+    { text: '1', value: '1' },
+    { text: '2', value: '2' },
+    { text: '5', value: '5' },
+    { text: '10', value: '10' },
+    { text: '20', value: '20', selected: true },
+    { text: '50', value: '50' },
+    { text: '100', value: '100' },
+    { text: '200', value: '200' }
+  ])
+  $(formPageNumber).append(divSelect)
+  $(divPageNumber).append(formPageNumber)
+
+  self.dom.pageNumber.div = divPageNumber
+  self.dom.pageNumber.form = formPageNumber
+
+  $(formPageNumber).change(function() {
+    self.limit = self.getLimit()
+    self.update()
+  })
+
+  return divBetween
+}
+
+SATable.createTable = function() {
+  var self = this
+  var getDom = SATable.getDom
+
+  var div = getDom.Div()
+  var table = getDom.Table()
+  var tHead = getDom.THead()
+  var tBody = getDom.TBody()
+  var tr = getDom.Tr()
+
+  $(tHead).append(tr)
+  $(table).append(tHead).append(tBody)
+  $(div).append(table)
+
+  self.dom.table.head = tHead
+  self.dom.table.headTr = tr
+  self.dom.table.body = tBody
+
+  return div
+}
+
+SATable.initTable = function() {
+  var self = this
+  var getDom = SATable.getDom
+
+  var divContainer = getDom.Container()
+
+  // head
+  $(divContainer).append(self.createHead())
+  if (self.hasFilter()) {
+    $(divContainer).append(getDom.Br()).append(self.createFilterForm())
+  }
+  // bar up
+  $(divContainer).append(self.createBarUp())
+  // table
+  $(divContainer).append(self.createTable())
+  // bar bottom
+  %(divContainer).append(self.createBarBottom())
+
+  // 每页显示结果数量
+  self.limit = self.getLimit()
+
+  $('#' + self.id).append(divContainer)
+}
+
+SATable.initData = function(tableInfo) {
+  var self = this
+
+  self.id = tableInfo.id
+  self.title = tableInfo.title
+  self.columns = tableInfo.columns ? tableInfo.columns : []
+  self.filters = tableInfo.filters ? tableInfo.filters : []
+  self.search = tableInfo.search ? tableInfo.search : false
+  self.requestGenerator = tableInfo.requestGenerator
+  self.dataGenerator = tableInfo.dataGenerator
+  self.page = tableInfo.page ? 1 : tableInfo.page
+  self.createURL = tableInfo.createURL ? tableInfo.createURL : null
+  self.extraData = tableInfo.extraData ? tableInfo.extraData : {}
+  self.curPage = 1
+
+  var cols = self.columns
+  for (var i in cols) {
+    var col = cols[i]
+    if (col.sort && (col.ordering != -1 && col.ordering != 0 && col.ordering != 1)) {
+      col.ordering = 0
+    }
+  }
+
+  var tableIDs = {}
+  tableIDs.id = self.id + 'SAT'
+  tableIDs.filterBtn = tableIDs.id + 'FB'
+  tableIDs.filterDiv = tableIDs.id + 'FD'
+  tableIDs.filterForm = tableIDs.id + 'F'
+  self.tableIDs = tableIDs
+
+  var dom = {}
+  dom.filter = {}
+  dom.search = {}
+  dom.pagination = {}
+  dom.table = {}
+  dom.pageNumber = {}
+  self.dom = dom
+}
+
+SATable.getPaginationLi = function(page, curPage) {
+  var getDom = this.getDom
+  var li = getDom.Li('page-item')
+  var a = getDom.A(page, 'javascript:void(0)', 'page-link')
+  $(li).append(a)
+  if (page == curPage) {
+    $(li).addClass('active')
+  }
+  return li
+}
+
+SATable.getPaginationLiIgnore = function() {
+  var getDom = SATable.getDom
+  var li = getDom.Li('page-item disabled')
+  var a = getDom.A('…', 'javascript:void(0)', 'page-link')
+  $(li).append(a)
+  return li
+}
+
+SATable.fillPagination = function(data) {
+  var self = this
+  var getDom = SATable.getDom
+
+  var curPage = self.curPage
+  var page_max = Math.ceil(data.count / self.limit)
+
+  var liLast = getDom.Li('page-item page-prev')
+  var liNext = getDom.Li('page-item page-next')
+  var aLast = getDom.A(i, 'javascript:void(0)', 'page-link')
+  var aNext = $(aLast).clone()
+  $(aLast).append(getDom.IconLast())
+  $(aNext).append(getDom.IconNext())
+  $(liLast).append(aLast)
+  $(liNext).append(aNext)
+
+  var ul = self.dom.pagination.up.ul
+  $(ul).append(liLast)
+  if (page_max <= 7) {
+    for (var i = 1; i <= page_max; ++i) {
+      ul.append(SATable.getPaginationLi(i, curPage))
+    }
+  } else if (curPage <= 3) {
+    for (var i = 1; i <= 4; ++i) {
+      ul.append(SATable.getPaginationLi(i, curPage))
+    }
+    ul.append(SATable.getPaginationLiIgnore)
+    ul.append(SATable.getPaginationLi(page_max, curPage))
+  } else if (curPage >= page_max - 2) {
+    ul.append(SATable.getPaginationLi(1, curPage))
+    ul.append(SATable.getPaginationLiIgnore)
+    for (var i = page_max - 3; i <= page_max; ++i) {
+      ul.append(SATable.getPaginationLi(i, curPage))
+    }
+  } else {
+    ul.append(SATable.getPaginationLi(1, curPage))
+    ul.append(SATable.getPaginationLiIgnore)
+    ul.append(SATable.getPaginationLi(curPage - 1, curPage))
+    ul.append(SATable.getPaginationLi(curPage, curPage))
+    ul.append(SATable.getPaginationLi(curPage + 1, curPage))
+    ul.append(SATable.getPaginationLiIgnore)
+    ul.append(SATable.getPaginationLi(page_max, curPage))
+  }
+  $(ul).append(liNext)
+
+  if (curPage == 1) {
+    $(liLast).addClass('disabled')
+  }
+  if (curPage == page_max) {
+    $(liNext).addClass('disabled')
+  }
+
+  var buttonsDom = $(self.dom.pagination.up.ul).children(':not(.page-prev):not(.page-next):not(.disabled)').find('.page-link')
+  $(buttonsDom).click(function() {
+    var number = parseInt($(this).text())
+    self.curPage = number
+    if (curPage != number) {
+      self.update()
+    }
+  })
+  $(aLast).click(function() {
+    if (curPage > 1) {
+      self.curPage -= 1
+      self.update()
+    }
+  })
+  $(aNext).click(function() {
+    if (curPage < page_max) {
+      self.curPage += 1
+      self.update()
+    }
+  })
+
+  var navBottom = $(self.dom.pagination.up.nav).clone(true)
+  $(self.dom.pagination.bottom.div).append(navBottom)
+}
+
+SATable.flushPagination = function() {
+  var self = this
+  $(self.dom.pagination.up.ul).empty()
+  $(self.dom.pagination.bottom.div).empty()
+}
+
+SATable.flushTable = function() {
+  $(this.dom.table.body).empty()
+  $(this.dom.table.headTr).empty()
+}
+
+SATable.setLoading = function() {
+  var self = this
+  var getDom = SATable.getDom
+
+  self.flushTable()
+  var div = getDom.Div('row justify-content-sm-center jumbotron bg-faded')
+  var divContent = getDom.Div('col-1')
+  var icon = getDom.IconLoading()
+  $(divContent).append(icon)
+  $(div).append(divContent)
+  $(self.dom.table.headTr).append(div)
+}
+
+SATable.fillTableHead = function() {
+  var self = this
+  var getDom = SATable.getDom
+  var columns = self.columns
+  var headTr = self.dom.table.headTr
+
+  for(var i in columns) {
+    var column = columns[i]
+    // 名称
+    var th = getDom.Th()
+    $(th).text(column.caption)
+    // 分析排序
+    if (column.sort) {
+      var icon = null
+      if (column.ordering == 1) {               // 升序
+        icon = getDom.IconUp()
+      } else if (column.ordering == -1) {       // 降序
+        icon = getDom.IconDown()
+      } else {                                  // 无序
+        icon = getDom.IconNoDirection()
+      }
+      var link = $('<a class="ordering" href="javascript:void(0)"></a>')
+      $(link).append(icon)
+      $(th).append(link)
+    }
+    $(headTr).append(th)
+  }
+
+  $(headTr).find('a.ordering').click(function() {
+    var index = $(this).parent().index()
+    var column = self.columns[index]
+    column.ordering += 1
+    if (column.ordering > 1) {
+      column.ordering = -1
+    }
+    self.update()
+  })
+}
+
+SATable.fillTableBody = function(data) {
+  var self = this
+  var getDom = SATable.getDom
+  var types = SATable.types
+  var body = self.dom.table.body
+
+  for (var i in data) {
+    var obj = data[i]
+    var tr = getDom.Tr()
+    var columns = self.columns
+    for (var j in columns) {
+      var column = columns[j]
+      var content = obj[column.name]
+      var ret = content
+      if (types[column.type]) {
+        ret = types[column.type](content, column, obj)
+      }
+      var td = getDom.Td()
+      $(td).append(ret)
+      $(tr).append(td)
+    }
+    $(body).append(tr)
+  }
+}
+
+SATable.fillTable = function(data) {
+  var self = this
+  self.flushPagination()
+  self.fillPagination(data)
+  self.flushTable()
+  self.fillTableHead()
+  self.fillTableBody(data.data)
+}
+
+SATable.getRequest = function() {
+  var self = this
+  var dom = self.dom
+  var request = {}
+
+  // 生成筛选信息
+  if (self.hasFilter()) {
+    var filterData = SATable.getFormData(dom.filter.form)
+    var filters = {}
+    for (var i in filterData) {
+      var it = filterData[i]
+      if (it) {
+        filters[i] = it
+      }
+    }
+    request.filters = filters
+  }
+
+  // 生成搜索信息
+  if (self.hasSearch()) {
+    var searchData = SATable.getFormData(dom.search.form)
+    var search = searchData.search
+    if (search) {
+      request.search = search
+    }
+  }
+
+  // 生成排序信息
+  var ordering = []
+  var columns = self.columns
+  for (var i in columns) {
+    var column = columns[i]
+    if (column.sort && column.ordering != 0) {
+      ordering.push((column.ordering == 1 ? '' : '-') + column.name)
+    }
+  }
+  if (ordering.length > 0) {
+    request.ordering = ordering
+  }
+
+  // 获得每页显示结果数量
+  request.limit = self.limit
+
+  // 获得欲显示的页数
+  var curPage = self.curPage
+  request.page = curPage ? curPage : 1
+
+  return request
+}
+
+SATable.update = function() {
+  var self = this
+  var getDom = getDom
+  var dom = self.dom
+
+  // 显示载入界面
+  self.setLoading()
+
+  // 获得数据
+  var request = self.requestGenerator(self.getRequest())
+  $.ajax({
+    type: request.type,
+    url: request.url,
+    dataType: request.dataType,
+    data: request.data,
+    success: function(ret) {
+      var data = self.dataGenerator(ret)
+      self.fillTable(data)
+    }
+  })
+}
+
+SATable.SimpleAjaxTable = function(tableInfo) {
+  saTable = {
+    hasFilter: SATable.hasFilter,
+    hasSearch: SATable.hasSearch,
+    createFilterForm: SATable.createFilterForm,
+    createHead: SATable.createHead,
+    createBarUp: SATable.createBarUp,
+    createBarBottom: SATable.createBarBottom,
+    createTable: SATable.createTable,
+    getLimit: SATable.getLimit,
+    fillTableHead: SATable.fillTableHead,
+    fillTableBody: SATable.fillTableBody,
+    fillTable: SATable.fillTable,
+    flushTable: SATable.flushTable,
+    fillPagination: SATable.fillPagination,
+    flushPagination: SATable.flushPagination,
+    getRequest: SATable.getRequest,
+    initTable: SATable.initTable,
+    initData: SATable.initData,
+    setLoading: SATable.setLoading,
+    update: SATable.update,
+  }
+  saTable.initData(tableInfo)
+  saTable.initTable()
+  saTable.update()
+}
\ No newline at end of file
diff --git a/sat.drf.js b/sat.drf.js
new file mode 100644
index 0000000..3c225d7
--- /dev/null
+++ b/sat.drf.js
@@ -0,0 +1,60 @@
+var DRFTable = {}
+
+DRFTable.dataGenerator = function(data) {
+  return {
+    count: data.count,
+    data: data.results
+  }
+}
+
+DRFTable.requestGenerator = function(request) {
+  var data = {}
+
+  // 筛选项
+  if (this.hasFilter()) {
+    var filters = request.filters
+    for (var i in request.filters) {
+      data[i] = filters[i]
+    }
+  }
+  // 搜索
+  if (this.hasSearch()) {
+    data.search = request.search
+  }
+  // 排序
+  if (request.ordering) {
+    var ordering = request.ordering
+    var o = ''
+    var first = true
+    for (var i in ordering) {
+      if (first) {
+        first = false
+      } else {
+        o += ','
+      }
+      o += ordering[i]
+    }
+    data.ordering = o
+  }
+  // 每页显示数量
+  data.limit = request.limit
+  // 显示第几页
+  offset = (request.page - 1) * request.limit
+  data.offset = offset
+
+  var ret = {
+    type: 'get',
+    url: this.extraData.url,
+    dataType: 'json',
+    data: data
+  }
+
+  return ret
+}
+
+SATable.DRFTable = function(tableInfo) {
+  tableInfo.extraData = { url: tableInfo.url }
+  tableInfo.requestGenerator = DRFTable.requestGenerator
+  tableInfo.dataGenerator = DRFTable.dataGenerator
+  saTable = SATable.SimpleAjaxTable(tableInfo)
+}
\ No newline at end of file
diff --git a/simpleAjaxTable.js b/simpleAjaxTable.js
deleted file mode 100644
index f77c127..0000000
--- a/simpleAjaxTable.js
+++ /dev/null
@@ -1,305 +0,0 @@
-var simpleAjaxTable = {}
-
-simpleAjaxTable.flushPagination = function(limit, page, count) {
-  var page_max = Math.ceil(count / limit)
-
-  var html = ""
-
-  if(page_max <= 4) {
-    html += '<li class="page-item page-prev"><a class="page-link" href="javascript:void(0)"><i class="fa fa-angle-left"></i></a></li>'
-    for(var i = 1; i < page; ++i) {
-      html += '<li class="page-item"><a class="page-link" href="javascript:void(0)">' + i + '</a></li>'
-    }
-    html += '<li class="page-item active"><a class="page-link" href="javascript:void(0)">' + page + '</a></li>'
-    for(var i = page + 1; i <= page_max; ++i) {
-      html += '<li class="page-item"><a class="page-link" href="javascript:void(0)">' + i + '</a></li>'
-    }
-    html += '<li class="page-item page-next"><a class="page-link" href="javascript:void(0)"><i class="fa fa-angle-right"></i></a></li>'
-  } else {
-    html += '<li class="page-item page-prev"><a class="page-link" href="javascript:void(0)"><i class="fa fa-angle-left"></i></a></li>'
-    if(page == 1) {
-      html += '<li class="page-item active"><a class="page-link" href="javascript:void(0)">' + page + '</a></li>'
-      for(var i = page + 1; i <= 3; ++i) {
-        html += '<li class="page-item"><a class="page-link" href="javascript:void(0)">' + i + '</a></li>'
-      }
-      html += '<li class="page-item disabled"><a class="page-link" href="javascript:void(0)">' + '…' + '</a></li>'
-      html += '<li class="page-item"><a class="page-link" href="javascript:void(0)">' + page_max + '</a></li>'
-    } else if (page >= page_max-2) {
-
-      html += '<li class="page-item"><a class="page-link" href="javascript:void(0)">' + 1 + '</a></li>'
-      html += '<li class="page-item disabled"><a class="page-link" href="javascript:void(0)">' + '…' + '</a></li>'
-      for(var i = page_max - 2; i < page; ++i) {
-        html += '<li class="page-item"><a class="page-link" href="javascript:void(0)">' + i + '</a></li>'
-      }
-      html += '<li class="page-item active"><a class="page-link" href="javascript:void(0)">' + page + '</a></li>'
-      for(var i = page + 1; i <= page_max; ++i) {
-        html += '<li class="page-item"><a class="page-link" href="javascript:void(0)">' + i + '</a></li>'
-      }
-    } else {
-      html += '<li class="page-item"><a class="page-link" href="javascript:void(0)">' + (page-1) + '</a></li>'
-      html += '<li class="page-item active"><a class="page-link" href="javascript:void(0)">' + page + '</a></li>'
-      html += '<li class="page-item"><a class="page-link" href="javascript:void(0)">' + (page+1) + '</a></li>'
-      html += '<li class="page-item disabled"><a class="page-link" href="javascript:void(0)">' + '…' + '</a></li>'
-      html += '<li class="page-item"><a class="page-link" href="javascript:void(0)">' + page_max + '</a></li>'
-    }
-    html += '<li class="page-item page-next"><a class="page-link" href="javascript:void(0)"><i class="fa fa-angle-right"></i></a></li>'
-  }
-
-  var pg = $("."+this.tablePaginationClass)
-  $(pg).find("a").unbind("click")
-  $(pg).empty().append(html)
-
-  if(page == 1) {
-    $(".page-prev").addClass("disabled")
-  }
-  if(page == page_max) {
-    $(".page-next").addClass("disabled")
-  }
-
-  $("."+this.tablePaginationClass+" li a").click(function() {
-    text = $(this).text()
-    if(text == "") {
-      if($(this).find("i").hasClass("fa-angle-left")) {
-        simpleAjaxTable.page -= 1
-      } else {
-        simpleAjaxTable.page += 1
-      }
-    } else {
-      simpleAjaxTable.page = parseInt(text)
-    }
-
-    simpleAjaxTable.flushTable()
-  })
-}
-
-
-simpleAjaxTable.flushTable = function() {
-  var limit = parseInt($("#"+this.tablePageNumber).find("option:selected").text())
-  var page = this.page
-  var search = this.search != null ? this.search : ""
-  var filterData = this.filterData != null ? this.filterData : {}
-
-  var ordering = []
-  for(var i in this.column) {
-    if(this.column[i].sort) {
-      var info = ""
-      if(this.column[i].ordering < 0) {
-        info += "-"
-      } else if(this.column[i].ordering == 0) {
-        continue
-      }
-      info += this.column[i].name
-      ordering.push(info)
-    }
-  }
-  var request = this.requestGenerator(limit, page, filterData, search, ordering)
-
-  var SAT = this
-
-  $.ajax({
-    type: request.type,
-    url: request.url,
-    dataType: request.dataType,
-    data: request.data,
-    success: function(ret) {
-      var column = simpleAjaxTable.column
-      var html = ""
-      for(var i in column) {
-        var c = column[i]
-        var caption = c.caption
-        if(c.sort) {
-          if(c.ordering == 1) {
-            html += '<th nowrap>'+caption+' <a cname="'+c.name+'" class="'+simpleAjaxTable.orderingBtn+'" href="javascript:void(0)"><i class="fa fa-angle-up"></i></a></th>'
-          } else if(c.ordering == -1) {
-            html += '<th nowrap>'+caption+' <a cname="'+c.name+'" class="'+simpleAjaxTable.orderingBtn+'" href="javascript:void(0)"><i class="fa fa-angle-down"></i></a></th>'
-          } else {
-            html += '<th nowrap>'+caption+' <a cname="'+c.name+'" class="'+simpleAjaxTable.orderingBtn+'" href="javascript:void(0)"><i class="fa fa-circle-thin"></i></a></th>'
-          }
-        } else {
-          html += '<th nowrap>'+caption+'</th>'
-        }
-      }
-      $('#'+simpleAjaxTable.tableHeadTr).empty().append(html)
-
-      $("."+simpleAjaxTable.orderingBtn).click(function() {
-        var cname = $(this).attr("cname")
-        for(var i in column) {
-          if(column[i].name == cname) {
-            var o = column[i].ordering
-            o += 1
-            if(o > 1) {
-              o = -1
-            }
-            column[i].ordering = o
-            simpleAjaxTable.flushTable()
-            return
-          }
-        }
-      })
-
-      var tbody = $("#"+simpleAjaxTable.tableBody)
-      var generatedData = simpleAjaxTable.dataGenerator(ret)
-
-      $(tbody).empty()
-      for(var i in generatedData.results) {
-        html = '<tr>'
-
-        var line = generatedData.results[i]
-
-        for(var i in column) {
-          var name = column[i].name
-          var info = line[name]
-
-          if(column[i].type == "datetime") {
-            var iDate = new Date(info)
-            info = iDate.toLocaleString()
-          }
-
-          html += '<td>'+info+'</td>'
-        }
-
-        html += '</tr>'
-        $(tbody).append(html)
-      }
-
-      SAT.flushPagination(limit, page, ret.count)
-    }
-  })
-}
-
-simpleAjaxTable.init = function(table_info) {
-  this.id = table_info.id
-  this.title = table_info.title
-  this.column = table_info.column
-  this.filter = table_info.filter
-  this.requestGenerator = table_info.requestGenerator
-  this.dataGenerator = table_info.dataGenerator
-  this.page = table_info.page == null ? 1 : table_info.page
-
-  this.tableID = this.id + 'SAT'
-  this.tableFilterBtn = this.tableID + "FBTN"
-  this.tableFilter = this.tableID + "F"
-  this.tableFilterDiv = this.tableFilter + "D"
-  this.tableSearchForm = this.tableID + "SF"
-  this.tableSearchInput = this.tableID + "SI"
-  this.tablePageNumberForm = this.tableID + "PNF"
-  this.tablePageNumber = this.tableID + "PN"
-  this.tablePaginationClass = this.tableID + "PC"
-  this.tableHeadTr = this.tableID + "THTR"
-  this.tableBody = this.tableID + "TB"
-  this.orderingBtn = this.tableID + "OBTN"
-
-$('#' + this.id).append(
-'<div class="container">\
-  <div class="row justify-content-between">\
-    <div>\
-      <h2>'+this.title+'</h2>\
-    </div>\
-    <div>\
-      <button id="'+this.tableFilterBtn+'" type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#'+this.tableFilterDiv+'">筛选</button>\
-    </div>\
-  </div>\
-  <div class="container jumbotron bg-faded collapse" id="'+this.tableFilterDiv+'">\
-    <form class="form" id="'+this.tableFilter+'" onsubmit="return false;">\
-    </form>\
-  </div>\
-  <div class="row justify-content-between">\
-    <div class="col-md-5 col-sm-12">\
-      <form class="form" id="'+this.tableSearchForm+'" onsubmit="return false;">\
-        <div class="form-group row">\
-          <label for="'+this.tableSearchInput+'" class="sr-only">搜索</label>\
-          <div class="col-xs-12 input-group">\
-            <input type="text" class="form-control" name="search" id="'+this.tableSearchInput+'" placeholder="搜索">\
-            <span class="input-group-btn">\
-              <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>\
-            </span>\
-          </div>\
-        </div>\
-      </form>\
-    </div>\
-    <div class="col-md-6 col-sm-12">\
-      <nav aria-label="Page navigation" style="float:right;">\
-        <ul class="pagination '+this.tablePaginationClass+'">\
-        </ul>\
-      </nav>\
-    </div>\
-  </div>\
-  <div>\
-    <table class="table table-hover">\
-      <thead>\
-        <tr id="'+this.tableHeadTr+'">\
-        </tr>\
-      </thead>\
-      <tbody id="'+this.tableBody+'">\
-      </tbody>\
-    </table>\
-  </div>\
-  <div class="row justify-content-between">\
-    <div class="col-md-3">\
-      <form id="'+this.tablePageNumberForm+'">\
-        <div class="form-group row">\
-          <label class="col-md-4 col-form-label" for="'+this.tablePageNumber+'">每页</label>\
-          <div class="col-md-8">\
-            <select class="form-control" id="'+this.tablePageNumber+'">\
-              <option>5</option>\
-              <option>10</option>\
-              <option selected="selected">20</option>\
-              <option>50</option>\
-              <option>100</option>\
-              <option>200</option>\
-            </select>\
-          </div>\
-        </div>\
-      </form>\
-    </div>\
-    <div class="col-md-6">\
-      <nav aria-label="Page navigation" style="float:right;">\
-        <ul class="pagination '+this.tablePaginationClass+'">\
-       </ul>\
-      </nav>\
-    </div>\
-  </div>\
-</div>'
-)
-
-  if(this.filter == null || this.filter.length == 0) {
-    $("#"+this.tableFilterDiv).remove()
-    $("#"+this.tableFilterBtn).remove()
-  } else {
-    var filterForm = $("#"+this.tableFilter)
-    var filter = this.filter
-    for(var i in filter) {
-      var info = filter[i]
-
-      $(filterForm).append(
-'      <div class="form-group row">\
-        <label for="'+(simpleAjaxTable.tableID+info.name)+'" class="col-md-3 col-form-label">'+info.caption+'</label>\
-        <div class="col-md-9">\
-          <input type="'+info.type+'" class="form-control" name="'+info.name+'" id="'+(simpleAjaxTable.tableID+info.name)+'" placeholder="'+info.placeholder+'">\
-        </div>\
-      </div>'
-      )
-    }
-    $(filterForm).append(
-'      <span class="input-group-btn">\
-        <button type="submit" class="btn btn-info col-xs-12">查询</button>\
-      </span>'
-    )
-
-    $(filterForm).submit(function() {
-      simpleAjaxTable.filterData = getFormData(filterForm)
-      simpleAjaxTable.flushTable()
-    })
-  }
-
-  this.flushTable()
-
-  $("#"+this.tablePageNumber).change(function() {
-    simpleAjaxTable.flushTable()
-  })
-
-  $("#"+this.tableSearchForm).submit(function() {
-    simpleAjaxTable.search = $("#"+simpleAjaxTable.tableSearchInput).val()
-    simpleAjaxTable.flushTable()
-  })
-}
\ No newline at end of file