使用jquery-datatable和bootsrap创建表格

最新推荐文章于 2021-06-17 13:39:40 发布

Houyer

最新推荐文章于 2021-06-17 13:39:40 发布

阅读量615

点赞数

分类专栏： Java开发 web前端文章标签： jquery-datatable-demo bootstrap

本文链接：https://blog.csdn.net/chaudementwu/article/details/62431407

版权

Java开发同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

web前端

2 篇文章 0 订阅

订阅专栏

使用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);

四.截图如下所示

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

Houyer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jquery-datatable和bootsrap创建表格

使用jquery-datatable和bootsrap创建表格使用jquery-datatable插件bootstrap前端框架json一.创建demo.html代码块代码块语法遵循标准markdown代码，例如：<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib uri="http:
复制链接

扫一扫