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


Posted in Javascript onMarch 17, 2017

 使用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">
      <div class="m-b-md">
        <h3 class="m-b-none"></h3>
       </div>
       <div class="m-b-md">
        <h3 class="m-b-none">中医药典</h3>
       </div>
       <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>
        <div 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>
        </div>
       </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);

四.截图如下所示

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

以上所述是小编给大家介绍的使用jquery datatable和bootsrap创建表格实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
将jQuery应用于login页面的问题及解决
Oct 17 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
jQuery实现图片左右滚动特效
Apr 20 Javascript
微信小程序 form组件详解
Oct 25 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 #Javascript
基于bootstrap实现收缩导航条
Mar 17 #Javascript
javascript基本数据类型和转换
Mar 17 #Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 #Javascript
js实现一键复制功能
Mar 16 #Javascript
js判断PC端与移动端跳转
Dec 24 #Javascript
jquery编写日期选择器
Mar 16 #Javascript
You might like
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
Apache服务器无法使用的解决方法
2013/05/08 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
php强制运行广告的方法
2014/12/01 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
网络编辑岗位职责范本
2014/02/10 职场文书
安全教育实施方案
2014/03/02 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书