使用jquery数据表和bootsrap创建表格实例代码

使用jquery-数据表插件

引导程序前端框架

json

一。创建demo.html

代码块

代码块语法遵循标准减价代码，例如：

“% @”页面语言=“Java”导入=“Java”。乌提尔。*“页面编码=”UTF-8“% @ taglib uri=”http://Java。星期日com/JSP/jstl/core ' prefix=' c ' % % String path=request。getcontextpath()；字符串基本路径=请求。getscheme()' ://'请求。getservername()“:”请求。getserverport()“path ”/；%!DOCTYPE html html lang=' en ' class=' app ' hearta charset=' utf-8 '/title XXX服务平台/title meta name=' description ' content=' app，web app，responsive，admin dashboard，admin，flat ui，ui工具包，离屏nav/meta name=' viewport ' content=' width=device-width，initial-scale=1，maximum-scale=1' /link rel='样式表href=' %=请求。getcontextpath()%/www/AL _ app/js/jPlayer/jPlayer。平的。CSS ' rel='外部nofollow '类型=' text/CSS '/link rel='样式表-[如果lt IE 9]脚本src=' http : js/IE/html 5 shiv。js /脚本脚本src=' http : js/IE/response。量滴js /脚本脚本src=' http : js/IE/excanvas。js /脚本！[endif] - /headbody class=' '！- ***********医用药典开始* * * * * * * * * * * * * *-section id=' content ' section class=' vbox ' section class=' rollable padder ' div class=' m-B- MD ' H3 class=' m-B- none '/H3/div class=' m-B- MD ' H3 class=' m-B- none '中医药典/H3/div剖面类别=“面板面板-默认”标题类别=“面板-标题”清单I class=' fa fa-info-sign text-muted ' data-toggle=' tooltip ' data-placement=' bottom ' data-title=' Ajax '加载数据/我/标题div class=' table-responsive ' table class=' table-striped m-b-none ' data-ride=' datatables '该和tr th style='width:15% '序号/th style=' width :20% '药名/th style=' width :20% '拼音简称/th style=' width :15% '用法/th style=' width :15% '操作/th/tr/ad t body/t body/table/div/section/section/section a href=' # ' rel=' external no follow ' class=' hide nav-off-screen-block ' data-toggle=' : nav-off-screen，open ' data-target=' nav，html'/a /section！ - ***********医用药典结束* * * * * * * * * * *-/section/section/section脚本src=' http :%=请求。getcontextpath()%/www/AL _ app/js/jquery。量滴js '/脚本！-Bootstrap-script src=' http :%=请求。getcontextpath()%/www/AL _ app/js/Bootstrap。js '/脚本！-App-script src=' http :%=请求。getcontext path()%/www/AL _ App/js/App。js/'脚本脚本类型=' text/JavaScript ' src=' http :%=request。getcontext path()%/www/AL _ App/js/jPlayer/demo。js/' script script src=' http :%=请求。getcontext path()%/www/AL _ App/JH _ js/二。创建一个毒品。json

{'aaData': [{ '序号' : '1 '，'药名' : '白术'，'拼音缩写' : 'bzh '，'用法' : '口服'，'操作' : '编辑' }，{。拼音缩写' : 'bzh '，'用法' : '口服'，'操作' : '编辑' }，{ '序号' : '4 '，'药名' : '白术'，'拼音缩写' : 'bzh '“'序号' : '5 '，'药名' 3: '白术'，'拼音缩写' : 'bzh '，'用法' : '口服

/* *使用jquery-datatable异步请求数据以创建表**/函数($) {“使用strict”；$(function(){//datatable $('[data-ride=' datatables ']')。每个(函数(){ var oTable=$(this))。dataTable({ ' b processing ' : true，Sajaxsource ' : ' www/al _ app/druges/druges . JSON '，//异步请求JSON data ' sdom ' : ' ' row ' ' col-sm-6 ' l ' col-sm-6 ' frt ' row ' ' col-sm-6 ' SPaginationType ' : ' full '，//命名表单元' ao columns ' :[{ ' mData ' 3:});}(window . jquery)；4.截图如下

以上是使用边肖介绍的jquery datatable和bootsrap创建表的示例代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！