Json+DataTables+Bootsrap插件简单的实例

来源：互联网发布：管家婆软件使用方法编辑：程序博客网时间：2024/05/17 04:38

简要教程

这是一款非常实用的基于bootstrap的jQuery多功能模态对话框插件。该jQuery模态对话框集警告框、确认框和对话框于一体。是一款不可多得的多功能、多用途的模态对话框插件。它的主要特点有：

可以通过AJAX直接将调用内容到对话框中。
可以在指定的时间后自动关闭对话框。
可以设置为点击模态背景不关闭对话框。
拥有丰富的回调函数。

使用方法

该jQuery模态对话框插件有俩个外部依赖：

Bootstrap by Twitter > v2
jQuery library > v1.8

在页面中引入jQuery和jquery-confirm.js以及jquery-confirm.css文件，同时引入datatables依赖文件。

<!-- DataTables CSS --><link rel="stylesheet" href="css/jquery.dataTables.css" type="text/css"></link><link rel="stylesheet" href="css/jquery-confirm.css" type="text/css"></link><!-- jQuery --><script type="text/javascript" src="js/jquery.js"></script><!-- DataTables and Bootstrap--><script type="text/javascript" src="js/jquery.dataTables.js"></script><script type="text/javascript" src="js/jquery-confirm.js"></script>

基本使用

$.confirm({    title: 'Json 专题',//标题    animationSpeed: 2000,//2000是以毫秒未设置值，可设置显示的快慢    animation:"top",    confirmButtonClass: 'btn-info',    cancelButtonClass: 'btn-danger',    confirm: function(){        alert('the user clicked confirm');    }});

另外加上js中的json+ajax+datatables

 $(document).ready( function () {var list = [];$.ajax({type : 'post',url : '/Demo/json',dataType : 'json',success : function(data) {eval(data);var html = "";for (var i = 0; i < data.length; i++) {var emp = data[i];html += "<tr>";html += "<td>" + emp.id + "</td>";html += "<td>" + emp.name + "</td>";html += "<td>" + emp.age + "</td>";html += "</tr>";}$("#show").html(html);//调用datatables插件$('#table_id_example').DataTable({"lengthMenu" : [ [ 2, 10, 20, -1 ], [ 2, 10, 20, "All" ] ],//每页显示条数设置});}});   });

html代码：

<div style="width: 800px; margin: 0 auto"><a href="hello" style="font-size: 32;">点我!!</a><input type="button" value="JSON" onclick="search()"><table id="table_id_example" class="display"><thead><tr><th>编号</th><th>姓名</th><th>年龄</th></tr></thead><tbody id="show"><tr><td>1</td><td>张三</td><td>18</td></tr></tbody></table></div>

如有不理解，或者需要这方面的实例，请在在下面评论中留言。

1 0