jquerydatatable和bootsrap创建表格实例教程

来源：动视网责编：小采时间：2020-11-27 20:05:11

jquerydatatable和bootsrap创建表格实例教程

jquerydatatable和bootsrap创建表格实例教程:本文主要介绍了使用jquery-datatable和bootsrap创建表格的实例代码,需要的朋友可以参考下，希望能帮助大家掌握datatable和bootsrap创建表格的方法。使用jquery-datatable插件bootstrap前端框架json一.创建demo.html代码块代码块语法遵循标准m

推荐度：

点击下载本文 文档为doc格式

导读jquerydatatable和bootsrap创建表格实例教程:本文主要介绍了使用jquery-datatable和bootsrap创建表格的实例代码,需要的朋友可以参考下，希望能帮助大家掌握datatable和bootsrap创建表格的方法。使用jquery-datatable插件bootstrap前端框架json一.创建demo.html代码块代码块语法遵循标准m

本文主要介绍了使用jquery-datatable和bootsrap创建表格的实例代码,需要的朋友可以参考下，希望能帮助大家掌握datatable和bootsrap创建表格的方法。

使用jquery-datatable插件

bootstrap前端框架

json

一.创建demo.html

代码块

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

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme() + "://"
 + request.getServerName() + ":" + request.getServerPort()
 + path + "/";
%>
<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="utf-8" />
<title>XXX服务平台</title>
<meta name="description"
 content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
<meta name="viewport"
 content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet"
 href="<%=request.getContextPath()%>/www/AL_app/js/jPlayer/jplayer.flat.css" rel="external nofollow" 
 type="text/css" />
<link rel="stylesheet"
 href="<%=request.getContextPath()%>/www/AL_app/css/bootstrap.css" rel="external nofollow" 
 type="text/css" />
<link rel="stylesheet"
 href="<%=request.getContextPath()%>/www/AL_app/css/font.css" rel="external nofollow" 
 type="text/css" />
<link rel="stylesheet"
 href="<%=request.getContextPath()%>/www/AL_app/css/app.css" rel="external nofollow" 
 type="text/css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/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]-->
</head>
<body class=""
<!-- ***********医用药典开始************** -->
<section id="content">
 <section class="vbox">
 <section class="scrollable padder">
 <p class="m-b-md">
 <h3 class="m-b-none"></h3>
 </p>
 <p class="m-b-md">
 <h3 class="m-b-none">中医药典</h3>
 </p>
 <section class="panel panel-default">
 <header class="panel-heading">
 清单
 <i class="fa fa-info-sign text-muted" data-toggle="tooltip" data-placement="bottom" data-title="ajax to load the data."></i> 
 </header>
 <p class="table-responsive">
 <table class="table table-striped m-b-none" data-ride="datatables"> 
 <thead>
 <tr>
 <th style="width:15%" >序号</th>
 <th style="width:20%">药名</th>
 <th style="width:20%">拼音简称</th>
 <th style="width:15%">用法</th> 
 <th style="width:15%">操作</th>
 </tr> 
 </thead>
 <tbody>
 </tbody>
 </table>
 </p>
 </section>
 </section>
 </section>
 <a href="#" rel="external nofollow" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
 </section>
 <!-- ***********医用药典结束************** -->
 </section>
 </section>
 </section>
<script src="<%=request.getContextPath()%>/www/AL_app/js/jquery.min.js"></script>
 <!-- Bootstrap -->
<script src="<%=request.getContextPath()%>/www/AL_app/js/bootstrap.js"></script>
 <!-- App -->
<script src="<%=request.getContextPath()%>/www/AL_app/js/app.js"></script>
<script type="text/javascript"
 src="<%=request.getContextPath()%>/www/AL_app/js/jPlayer/demo.js"></script>
<script src="<%=request.getContextPath()%>/www/AL_app/jh_js/jq.dataTable.js"></script>
<script src="<%=request.getContextPath()%>/www/AL_app/js/datatables/jquery.csv-0.71.min.js"></script>
<script src="<%=request.getContextPath()%>/www/AL_app/drugs/demo.js"></script>
<script src="<%=request.getContextPath()%>/www/AL_app/js/app.plugin.js"></script>
</body>
</html>

二.创建一个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": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
 "sPaginationType": "full",
 //给表格单元的头信息命名
 "aoColumns": [
 { "mData": "序号" },
 { "mData": "药名" },
 { "mData": "拼音简称" },
 { "mData": "用法" },
 { "mData": "操作" }
 ]
 } );
 });
}(window.jQuery);

四.截图如下所示