jdbc+servlet交互
http://www.tuicool.com/articles/NBBnum
中文官网
http://datatables.club/manual/daily/2016/04/18/option-ajax.html
http://datatables.club/reference/option/ajax.html
英文
https://datatables.net/manual/ajax
php交互
http://blog.csdn.net/u013405778/article/details/51690038
添加删除编辑
http://www.jb51.net/article/77640.htm
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Extn.</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <!-- <tbody> <tr> <td>Zorita Serrano</td> <td>Software Engineer</td> <td>San Francisco</td> <td>4389</td> <td>2012/06/01</td> <td>123</td> </tr> </tbody> --> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Extn.</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> </table> <script src="assets/vendor/js/jquery.min.js"></script> <script src="assets/vendor/js/jquery-2.1.1.min.js"></script> <script src="assets/vendor/js/jquery-migrate-1.2.1.min.js"></script> <script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script> <script src="assets/vendor/skycons/js/skycons.js"></script> <script src="assets/vendor/js/pace.min.js"></script> <!-- Plugins JS--> <script src="assets/plugins/moment/js/moment.min.js"></script> <script src="assets/plugins/select2/select2.js"></script> <script src="assets/plugins/jquery-datatables/media/js/jquery.dataTables.js"></script> <script src="assets/plugins/jquery-datatables-bs3/js/datatables.js"></script> <script src="assets/plugins/magnific-popup/js/magnific-popup.js"></script> <script src="assets/plugins/sparkline/js/jquery.sparkline.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var table = $('#example').DataTable( { "bProcessing": true, "ajax": "data/objects.txt", /* columns:[ {data:"Name"}, {data:"Position"}, {data:"Office"}, {data:"Extn."}, {data:"Start date"}, {data:"Salary"}, ], */ //{ "data":[{"Name": "Tiger Nixon", "Position": "System Architect", "Salary": "$3,120", "Start date": "2011/04/25", "Office": "Edinburgh", "Extn": "5421"} ]} //{"data": [[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$3,120" ]]} "columnDefs": [ { "targets": -1, "data": null, "defaultContent": "<button>Click!</button>" } ] } ); $('#example tbody').on( 'click', 'button', function () { var data = table.row( $(this).parents('tr') ).data(); alert( data[0] +"'s salary is: "+ data[ 5 ] ); } ); } ); </script> </body> </html>