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

简要教程

这是一款非常实用的基于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>

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