中医药典
| 序号 | 药名 | 拼音简称 | 用法 | 操作 |
|---|
使用jquery-datatable插件
创新互联建站主要为客户提供服务项目涵盖了网页视觉设计、VI标志设计、成都全网营销推广、网站程序开发、HTML5响应式成都网站建设、移动网站建设、微商城、网站托管及成都网站维护、WEB系统开发、域名注册、国内外服务器租用、视频、平面设计、SEO优化排名。设计、前端、后端三个建站步骤的完善服务体系。一人跟踪测试的建站服务标准。已经为广告推广行业客户提供了网站建设服务。
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 + "/";
%>
XXX服务平台
中医药典
清单
序号
药名
拼音简称
用法
操作
二.创建一个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创建表格实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！