jquery datatable 및 bootsrap 테이블 생성 예제 튜토리얼

이 글은 주로 jquery-datatable과 bootsrap을 사용하여 테이블을 생성하는 예제 코드를 소개합니다. 도움이 필요한 친구들이 참고하여 datatable과 bootsrap을 사용하여 테이블을 생성하는 방법을 익힐 수 있기를 바랍니다.

jquery-datatable 플러그인 사용

bootstrap 프런트 엔드 프레임워크

json

1. 데모.html 생성

코드 블록

코드 블록 구문은 표준 마크다운 코드를 따릅니다. 예:

nbsp;html>


<meta>
<title>XXX服务平台</title>
<meta>
<meta>
<link>/www/AL_app/js/jPlayer/jplayer.flat.css" rel="external nofollow" 
  type="text/css" />
<link>/www/AL_app/css/bootstrap.css" rel="external nofollow" 
  type="text/css" />
<link>/www/AL_app/css/font.css" rel="external nofollow" 
  type="text/css" />
<link>/www/AL_app/css/app.css" rel="external nofollow" 
  type="text/css" />
<link>/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]-->


<section>
     <section>
      <section>
      <p>
        </p>
<h3></h3>
       
       <p>
        </p>
<h3>中医药典</h3>
       
       <section>
        <header>
         清单
         <i></i> 
        </header>
        <p>
         </p>
<table> 
          <thead>
           <tr>
            <th>序号</th>
            <th>药名</th>
            <th>拼音简称</th>
            <th>用法</th>                 
            <th>操作</th>
           </tr>       
          </thead>
          <tbody>
          </tbody>
         </table>
        
       </section>
      </section>
     </section>
     <a></a>
    </section>
    <!-- ***********医用药典结束************** -->
      
    
  
<script>/www/AL_app/js/jquery.min.js"></script>
  <!-- Bootstrap -->
<script>/www/AL_app/js/bootstrap.js"></script>
  <!-- App -->
<script>/www/AL_app/js/app.js"></script>
<script>/www/AL_app/js/jPlayer/demo.js"></script>
<script>/www/AL_app/jh_js/jq.dataTable.js"></script>
<script>/www/AL_app/js/datatables/jquery.csv-0.71.min.js"></script>
<script>/www/AL_app/drugs/demo.js"></script>
<script>/www/AL_app/js/app.plugin.js"></script>

2. drug .json

{
  "aaData": [
  {
    "序号": "1",
    "药名": "白术",
    "拼音简称": "bzh",
    "用法": "内服",
    "操作": "编辑"
  }, 
  {
    "序号": "3",
    "药名": "白术",
    "拼音简称": "bzh",
    "用法": "内服",
    "操作": "编辑"
  }, 
  {
    "序号": "4",
    "药名": "白术",
    "拼音简称": "bzh",
    "用法": "内服",
    "操作": "编辑"
  }, 
  {
    "序号": "5",
    "药名": "白术",
    "拼音简称": "bzh",
    "用法": "内服",
    "操作": "编辑"
  }, 
  {
    "序号": "6",
    "药名": "白术",
    "拼音简称": "bzh",
    "用法": "内服",
    "操作": "编辑"
  }
]

만들기 3. 데모.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": "r>t>",
   "sPaginationType": "full",
   //给表格单元的头信息命名
   "aoColumns": [
    { "mData": "序号" },
    { "mData": "药名" },
    { "mData": "拼音简称" },
    { "mData": "用法" },
    { "mData": "操作" }
   ]
  } );
 });
}(window.jQuery);

만들기

관련 권장 사항:

Boosttrap을 사용하여 테이블 인스턴스 생성

Jquery를 사용하여 테이블 생성, 테이블 데이터 채우기, 테이블 재설정

jquery_jquery를 기반으로 테이블을 동적으로 생성하기 위한 플러그인

위 내용은 jquery datatable 및 bootsrap 테이블 생성 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!