本文主要介紹了使用jquery-datatable和bootsrap創建表格的實例程式碼,需要的朋友可以參考下，希望能幫助大家掌握datatable和bootsrap創建表格的方法。
使用jquery-datatable外掛
bootstrap前端框架
json
一.建立demo.html
程式碼區塊
程式碼區塊語法遵循標準markdown程式碼，例如：
nbsp;html>
<meta>
<title>XXX服务平台</title>
<meta>
<meta>
<link>/www/AL_app/js/jPlayer/jplayer.flat.css" rel="external nofollow"
type="text/css" />
<link>/www/AL_app/css/bootstrap.css" rel="external nofollow"
type="text/css" />
<link>/www/AL_app/css/font.css" rel="external nofollow"
type="text/css" />
<link>/www/AL_app/css/app.css" rel="external nofollow"
type="text/css" />
<link>/www/AL_app/js/datatables/datatables.css" rel="external nofollow" type="text/css"/>
<!--[if lt IE 9]>
<script src="js/ie/html5shiv.js"></script>
<script src="js/ie/respond.min.js"></script>
<script src="js/ie/excanvas.js"></script>
<![endif]-->
<section>
<section>
<section>
<p>
</p>
<h3></h3>
<p>
</p>
<h3>中医药典</h3>
<section>
<header>
清单
<i></i>
</header>
<p>
</p>
<table>
<thead>
<tr>
<th>序号</th>
<th>药名</th>
<th>拼音简称</th>
<th>用法</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</section>
</section>
</section>
<a></a>
</section>
<!-- ***********医用药典结束************** -->
<script>/www/AL_app/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script>/www/AL_app/js/bootstrap.js"></script>
<!-- App -->
<script>/www/AL_app/js/app.js"></script>
<script>/www/AL_app/js/jPlayer/demo.js"></script>
<script>/www/AL_app/jh_js/jq.dataTable.js"></script>
<script>/www/AL_app/js/datatables/jquery.csv-0.71.min.js"></script>
<script>/www/AL_app/drugs/demo.js"></script>
<script>/www/AL_app/js/app.plugin.js"></script>
登入後複製
二.建立一個drugs.json
{
"aaData": [
{
"序号": "1",
"药名": "白术",
"拼音简称": "bzh",
"用法": "内服",
"操作": "编辑"
},
{
"序号": "3",
"药名": "白术",
"拼音简称": "bzh",
"用法": "内服",
"操作": "编辑"
},
{
"序号": "4",
"药名": "白术",
"拼音简称": "bzh",
"用法": "内服",
"操作": "编辑"
},
{
"序号": "5",
"药名": "白术",
"拼音简称": "bzh",
"用法": "内服",
"操作": "编辑"
},
{
"序号": "6",
"药名": "白术",
"拼音简称": "bzh",
"用法": "内服",
"操作": "编辑"
}
]登入後複製
三.建立一個demo.js
/** 使用jquery-datatable异步请求数据创建表格 **/
+function ($) { "use strict";
$(function(){
// datatable
$('[data-ride="datatables"]').each(function() {
var oTable = $(this).dataTable( {
"bProcessing": true,
"sAjaxSource": "www/AL_app/drugs/drugs.json",//异步请求json数据
"sDom": "r>t>",
"sPaginationType": "full",
//给表格单元的头信息命名
"aoColumns": [
{ "mData": "序号" },
{ "mData": "药名" },
{ "mData": "拼音简称" },
{ "mData": "用法" },
{ "mData": "操作" }
]
} );
});
}(window.jQuery);登入後複製
四.截圖如下圖
#大家學會了嗎覺得有用的趕快收藏起來吧。
相關推薦：
利用Boostrap建立表格實例
#Jquery建立表格、填入表格資料、重設表格
基於jquery的動態建立表格的外掛程式_jquery
#
以上是jquery datatable和bootsrap建立表格實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
