使用jquery-datatable和bootsrap创建表格

来源：互联网发布：js判断写法编辑：程序博客网时间：2024/06/09 23:06

使用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"    type="text/css" /><link rel="stylesheet"    href="<%=request.getContextPath()%>/www/AL_app/css/bootstrap.css"    type="text/css" /><link rel="stylesheet"    href="<%=request.getContextPath()%>/www/AL_app/css/font.css"    type="text/css" /><link rel="stylesheet"    href="<%=request.getContextPath()%>/www/AL_app/css/app.css"    type="text/css" /><link rel="stylesheet" href="<%=request.getContextPath()%>/www/AL_app/js/datatables/datatables.css" 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="#" 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);

四.截图如下所示

这张图片有点丑
这张效果好一些

0 0