首页 > 代码库 > web(九)---datatables使用
web(九)---datatables使用
本系列的前提是ngix已经配置好.
一. 下载安装datatables.
官网上给出了两种方式(http://datatables.net/manual/installation#Including-Javascript-/-CSS),
我们选择下载到本地的方法.
1. 到官网下载:
http://datatables.net/download/index
2. 下载后解压, 将路径添加到HTML文件中.
<!-- DataTables CSS --><link rel="stylesheet" type="text/css" href="/DataTables-1.10.4/media/css/jquery.dataTables.css"> <!-- jQuery --><script type="text/javascript" charset="utf8" src="/DataTables-1.10.4/media/js/jquery.js"></script> <!-- DataTables --><script type="text/javascript" charset="utf8" src="/DataTables-1.10.4/media/js/jquery.dataTables.js"></script>
二. 使用举例.
共3个在同一目录下的文件.
1. index.py添加datatable处理.
import tornado.ioloopimport tornado.webclass MainHandler(tornado.web.RequestHandler): def get(self): self.write("Hello, world, this is tornado test!")class StoryHandler(tornado.web.RequestHandler): def get(self, story_id): self.write("You requested the story " + story_id)class TemplateHandler(tornado.web.RequestHandler): def get(self): items = ["Item 1", "Item 2", "Item 3"] self.render("template.html", title="My title", items=items)class AngularjsTestHandler(tornado.web.RequestHandler): def get(self): self.render("angularjs_test.html")class AngularjsCgiHandler(tornado.web.RequestHandler): def get(self): self.render("angularjs_cgi.html")class DatatableHandler(tornado.web.RequestHandler): def get(self): self.render("datatable.html")application = tornado.web.Application([ (r"/", MainHandler), (r"/index.py", MainHandler), #(r"/story/([0-9]+)", StoryHandler), (r"/template", TemplateHandler), (r"/index.py/template", TemplateHandler), (r"/index.py/angularjs_test", AngularjsTestHandler), (r"/index.py/angularjs_cgi", AngularjsCgiHandler), (r"/index.py/datatable", DatatableHandler),])if __name__ == "__main__": application.listen(8888) tornado.ioloop.IOLoop.instance().start()
2. datatable.html
注意加入了下面几行:
<!-- DataTables CSS --><link rel="stylesheet" type="text/css" href="http://www.mamicode.com/DataTables-1.10.4/media/css/jquery.dataTables.css"> <!-- jQuery --><script type="text/javascript" charset="utf8" src="http://www.mamicode.com/DataTables-1.10.4/media/js/jquery.js"></script> <!-- DataTables --><script type="text/javascript" charset="utf8" src="http://www.mamicode.com/DataTables-1.10.4/media/js/jquery.dataTables.js"></script>
<!DOCTYPE html><html><body><div ng-app="datatable_app" ng-controller="datatable_ctrl"><table id="example" class="" cellspacing="0" width="100%" > <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> </tr> <tr> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> </tr> <tr> <td>Brielle Williamson</td> <td>Integration Specialist</td> <td>New York</td> <td>61</td> <td>2012/12/02</td> <td>$372,000</td> </tr> <tr> <td>Herrod Chandler</td> <td>Sales Assistant</td> <td>San Francisco</td> <td>59</td> <td>2012/08/06</td> <td>$137,500</td> </tr> <tr> <td>Rhona Davidson</td> <td>Integration Specialist</td> <td>Tokyo</td> <td>55</td> <td>2010/10/14</td> <td>$327,900</td> </tr> <tr> <td>Colleen Hurst</td> <td>Javascript Developer</td> <td>San Francisco</td> <td>39</td> <td>2009/09/15</td> <td>$205,500</td> </tr> <tr> <td>Colleen Hurst</td> <td>Javascript Developer</td> <td>San Francisco</td> <td>39</td> <td>2009/09/15</td> <td>$205,500</td> </tr> </tbody> </table></div></body></html><script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script><script src="datatable.js"></script><link rel="stylesheet" type="text/css" href="/DataTables-1.10.4/media/css/jquery.dataTables.css"><script type="text/javascript" charset="utf8" src="/DataTables-1.10.4/media/js/jquery.js"></script><script type="text/javascript" charset="utf8" src="/DataTables-1.10.4/media/js/jquery.dataTables.js"></script>
3. datatable.js
var app = angular.module("datatable_app", []);app.config(function($interpolateProvider) { $interpolateProvider.startSymbol(‘||‘); $interpolateProvider.endSymbol(‘||‘);});app.controller("datatable_ctrl", function($scope, $http, $timeout, $interval) { $(‘#example‘).dataTable();});
三. 运行访问.
(1) #python2.7 index.py
(2) 浏览器输入: http://localhost/datatable
浏览器显示如下:
web(九)---datatables使用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。