dataTable

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>

posted on 2017-02-20 17:33 Mr.He多多指教阅读(317) 评论(0) 编辑收藏举报