Maison > Article > interface Web > jquery datatable et bootsrap créent un exemple de tutoriel de table
Cet article présente principalement l'exemple de code d'utilisation de jquery-datatable et bootsrap pour créer des tables. Les amis dans le besoin peuvent s'y référer. J'espère qu'il pourra vous aider à maîtriser la méthode de création de tables avec datatable et bootsrap.
Utiliser le plug-in jquery-datatable
framework frontal bootstrap
json
1. .html
Bloc de code
La syntaxe du bloc de code suit le code de démarque standard, par exemple :
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. Créez un drug.json
{ "aaData": [ { "序号": "1", "药名": "白术", "拼音简称": "bzh", "用法": "内服", "操作": "编辑" }, { "序号": "3", "药名": "白术", "拼音简称": "bzh", "用法": "内服", "操作": "编辑" }, { "序号": "4", "药名": "白术", "拼音简称": "bzh", "用法": "内服", "操作": "编辑" }, { "序号": "5", "药名": "白术", "拼音简称": "bzh", "用法": "内服", "操作": "编辑" }, { "序号": "6", "药名": "白术", "拼音简称": "bzh", "用法": "内服", "操作": "编辑" } ]
3. Créez un 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": "r>t>", "sPaginationType": "full", //给表格单元的头信息命名 "aoColumns": [ { "mData": "序号" }, { "mData": "药名" }, { "mData": "拼音简称" }, { "mData": "用法" }, { "mData": "操作" } ] } ); }); }(window.jQuery);
4. La capture d'écran est la suivante
L'avez-vous appris ? Récupérez-le si vous le trouvez utile.
Recommandations associées :
Utilisez Boostrap pour créer des instances de table
Jquery crée des tables, remplit les données des tables et réinitialise les tables
Plug-in pour créer dynamiquement des tables basées sur jquery_jquery
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!