jquery datatable和bootsrap创建表格实例教程-js教程-PHP中文网

首页

web前端

js教程

jquery datatable和bootsrap创建表格实例教程

小云云

Jan 22, 2018 pm 01:24 PM

bootsrapdatatablejquery

本文主要介绍了使用jquery-datatable和bootsrap创建表格的实例代码,需要的朋友可以参考下，希望能帮助大家掌握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">
      <p class="m-b-md">
        <h3 class="m-b-none"></h3>
       </p>
       <p class="m-b-md">
        <h3 class="m-b-none">中医药典</h3>
       </p>
       <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>
        <p 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>
        </p>
       </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": "<&#39;row&#39;<&#39;col-sm-6&#39;l><&#39;col-sm-6&#39;f>r>t<&#39;row&#39;<&#39;col-sm-6&#39;i><&#39;col-sm-6&#39;p>>",
   "sPaginationType": "full",
   //给表格单元的头信息命名
   "aoColumns": [
    { "mData": "序号" },
    { "mData": "药名" },
    { "mData": "拼音简称" },
    { "mData": "用法" },
    { "mData": "操作" }
   ]
  } );
 });
}(window.jQuery);

四.截图如下所示

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

大家学会了吗觉得有用的赶紧收藏起来吧。

相关推荐：

利用Boostrap创建表格实例

Jquery创建表格、填充表格数据、重置表格

基于jquery的动态创建表格的插件_jquery

以上是jquery datatable和bootsrap创建表格实例教程的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。