使用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实现自定义对话框的代码
Jun 15 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
非主流的textarea自增长实现js代码
Dec 20 Javascript
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
Paypal支付不完全指北
Jun 04 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和javascript之间变量的传递实现代码
2012/12/19 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
Python中decorator使用实例
2015/04/14 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
Python之列表实现栈的工作功能
2019/01/28 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
python各种excel写入方式的速度对比
2020/11/10 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
就业推荐表自我鉴定
2013/10/29 职场文书
十八大感想感言
2014/02/10 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
南极大冒险观后感
2015/06/05 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
MySQL 存储过程的优缺点分析
2021/05/20 MySQL