DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/tabletools/2.2.2/css/dataTables.tableTools.min.css">
<script src="http://cdn.datatables.net/tabletools/2.2.2/js/dataTables.tableTools.min.js"></script>
<table class="dataTable" id="example">
    <thead>
        <tr>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 4.0</td>
            <td>Win 95+</td>
            <td> 4</td>
            <td>X</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 5.0</td>
            <td>Win 95+</td>
            <td>5</td>
            <td>C</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 5.5</td>
            <td>Win 95+</td>
            <td>5.5</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 6</td>
            <td>Win 98+</td>
            <td>6</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet Explorer 7</td>
            <td>Win XP SP2+</td>
            <td>7</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>AOL browser (AOL desktop)</td>
            <td>Win XP</td>
            <td>6</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Firefox 1.0</td>
            <td>Win 98+ / OSX.2+</td>
            <td>1.7</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Firefox...

JavaScript

dt = $('#example').DataTable({
     "dom": '<"clear">T<"clear"><"clear">lfrtip',
     "pagingType": "full_numbers",
     "scrollY": "440px",
     "scrollX": "100%",
     "scrollCollapse": true,
     "bProcessing": true,
     //"bServerSide": true,
     //"sAjaxSource": "includes/db/server_processing.php",
     "deferRender": true,
     "aaSorting": [
         [0, "desc"]
     ],
     "aoColumns": [{
         className: "center",
     }, {
         className: "center",
     }, {
         className: "center",
     }, {
         className: "center",
     }, {
         className: "center",
     }/*, {
         className: "center",
     }, {
         className: "center",
     }, */],
     "columnDefs": [

         {
             "aTargets": [3],
             "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                 $(nTd).css('text-align', 'center');
             },
             "mData": null,
             "mRender": function (data, type, full) {
                 return '<td><select id="dynamic_select_' + full[0] + '" name="dynamic_select_' + full[0] + '">\n\
                                                 <option id="0" value="">Select</option/>\n\
                                                 <option id="1_' + full[0] + '" value="test.php?id=' + full[0] + '">10</option/>\n\
                                                 <option id="2_' + full[0] + '" value="test2.php?id=' + full[0] + '">12</option/>\n\
                                                 <option id="3_' + full[0] + '" value="test3.php?id=' + full[0] + '">13</option/>\n\
                                                  </select></td>';
                 //return '<button>Click!</button>';

             }

         }, {
             "aTargets": [4],
             "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                 $(nTd).css('text-align', 'center');
             },
             "mData": null,
             "mRender": function (data, type, full) {
           ...