使用jquery 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">
<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表格datatables实例解析 直接加载和延迟加载
参考自官方文档,需要引入jquery.js,jquery.dataTables.js,dataTables.bootstrap.js(可选), 由于时间紧,省略了很多,所以总结份简化版的仅供参考. 1.直接加载,这个比较简单,如下 <div id="tid" class="col-sm-12 col-md-12"> <div id="secondtid" hidden="hidden"></div
-
jQuery表格插件datatables用法详解
一.Datatables简介 DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格.主要特点: 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定制样式 支持隐藏列 易用 可扩展性和灵活性 国际化 动态创建表格 免费的 二.如何使用 在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的DataTables插件来帮助我
-
使用jquery 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" pref
-
jQuery表格插件datatables用法总结
DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格. 官方网站及其下载地址:http:/www.datatables.net 当前最新版为1.10.2,读者可点此本站下载. 其主要特点如下: 1.自动分页处理 2.即时表格数据过滤 3.数据排序以及数据类型自动检测 4.自动处理列宽度 5.可通过CSS定制样式 6.支持隐藏列 7.易用 8.可扩展性和灵活性 9.国际化 10.动态创建表格 11.免费的 使用方
-
jQuery表格插件datatables用法汇总
DataTables是一个jQuery的表格插件,本文为大家分享了表格插件datatables用法,介绍了基础的部分知识,具体内容如下 一.初始化 在页面中 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css&
-
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
异步请求 var postData = { "env_name" : new_env_name, "env_url": new_env_url, "env_desc" : new_env_desc }; $.ajax({ type: 'POST', url : '/test_env_add/', data : postData, dataType : 'json', success : function(data){ $('#table_test
-
BootStrap数据表格实例代码
首先初始化页面 $(function(){ $('#archives-table').bootstrapTable({ url: "/coinSend/list",//数据源 dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows,分页时使用总记录数的键值为total search: true,//是否搜索 cache: false, striped: true, pagination: true,//是否分页 sortable:
-
基于jQuery实现仿51job城市选择功能实例代码
前些文章用写过,省市县三级联动,但是感觉选择的时候不够直观,现在改进了下,效果如下图 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="City.aspx.cs" Inherits="System_Select_City" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition
-
jQuery完成表单验证的实例代码(纯代码)
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <head> <meta charset=utf-8" /> <title>表单验证</title> <link href="css/style1.css" rel="external nofollow" rel="stylesheet" type="text/css"
-
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Bootstrap风格的分页控件自适应的: 参考网址:分页参考文档 1.风格样式: 2.首先引入js文件jQuery.twbsPagination.js <span style="font-size:14px;"><script type="text/javascript" src="plugins/page/jquery.twbsPagination.js"></script></span> 3.
-
jQuery自定义图片上传插件实例代码
摘要 1.jquery自定义插件方法 2.表单file样式调整 3.利用formData,ajax上传图片 4.js,css弹出层 5.springmvc上传图片 效果 调用方式 $("#picUrl").imgUpload({}),在代码内部为调用对象绑定了click事件,点击弹出上传界面. $(function(){ $("#picUrl").imgUpload({url:'<%=basePath%>'+'file/upload.do'}) $(&q
-
jsp中实现带滚动条的table表格实例代码
如下所示: <div style="width:700px; height:225px; overflow:auto;"> <table border="1" width="100%" cellpadding="0" cellspacing="0"> <tr> <td width="3%">0</td> <td width
-
分享Ajax创建简单实例代码
XmlHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API.XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面.几乎所有的浏览器都支持XMLHttpRequest对象,它是Ajax应用的核心技术. js代码如下: <html> <head> <title> New Document </title> <meta charset="utf
-
通过jquery实现页面的动画效果(实例代码)
有很多函数可以用来实现动画效果,其中animate函数为最为常见的函数之一.以下为对该函数使用方式的简要介绍. animate函数基本形式 通过animate实现动画效果的基本形式为: $(selector).animate({params},speed,callback); 其中{params}为必须项,它是一个对象,指明了我们希望指定元素通过动画效果运行后,其所具有的的CSS样式,speed和callback则皆为可选项,其中speed指明了动画运行的速度,其值可为数值类型(如1000表示动