使用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 相关文章推荐
MooTools 1.2介绍
Sep 14 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
webpack proxy 使用(代理的使用)
Jan 10 Javascript
js实现飞机大战游戏
Aug 26 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 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
PHP的面向对象编程
2006/10/09 PHP
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
joomla数据库操作示例代码
2016/01/06 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
Python多项式回归的实现方法
2019/03/11 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
python实现实时视频流播放代码实例
2020/01/11 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
介绍一下linux的文件系统
2012/03/20 面试题
大学生创业计划书的用途
2014/01/08 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
2014年市场部工作总结
2014/11/25 职场文书
环卫处个人工作总结
2015/03/04 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
2019军训心得体会
2019/06/27 职场文书