jQuery DataTable插件不起作用

Question

I'm using jquery datatable plugins to achieve pagination, individual column filter functionalities. I've added the below files:

1. jquery.dataTables.js
2. jquery.dataTables.min.css

and my code looks like this:

  $('#tcExecDetails').DataTable( {
      initComplete: function () {
          this.api().columns().every( function () {
              var column = this;
              var select = $('<select><option value=""></option></select>')
                  .appendTo( $(column.footer()).empty() )
                  .on( 'change', function () {
                      var val = $.fn.dataTable.util.escapeRegex(
                          $(this).val()
                      );

                      column
                          .search( val ? '^'+val+'$' : '', true, false )
                          .draw();
                  } );

              column.data().unique().sort().each( function ( d, j ) {
                  select.append( '<option value="'+d+'">'+d+'</option>' )
              } );
          } );
      }
  } );


 <table id="tcExecDetails"  class="display" style= "width:85%;font-size:11px;">
    <thead>
      <tr class="success">
        <th>Execution Id</th>
        <th>Test Case Name</th>
        <th>Start Time</th>
        <th>Actual End Time</th>
        <th>Planned End Time</th>
        <th>Execution Type</th>
        <th class="status">Status</th>
      </tr>
    </thead>
    <tbody id='tcExecDetailsTable' class="alt_content" >

    </tbody>
  </table>

Answer 1

Here's a sample code for DataTable using your dataset. You can look at the DataTable Extensions and Plugins

https://www.datatables.net/extensions/index

https://www.datatables.net/plug-ins/index

Code Sample

http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"" />

        $(document).ready(function () {

            try {

                var mydata = [
                                   {
                                       id: 1,
                                       name: "Test 1",
                                       startTime: '11/01/2013 00.00',
                                       actualEndTime:  '11/01/2013 12.00',
                                       plannedEndTime:  '11/01/2013 12.30',
                                       executionTime: 5.00,
                                       status: "Success"
                                   },
                                   {
                                       id: 2,
                                       name: "Test 2",
                                       startTime: '11/01/2015 00.00',
                                       actualEndTime:  '11/08/2015 12.00',
                                       plannedEndTime:  '11/09/2015 12.30',
                                       executionTime: 11.00,
                                       status: "Failed"
                                   },
                                   {
                                       id: 3,
                                       name: "Test 3",
                                       startTime: '11/01/2015 00.00',
                                       actualEndTime:  '11/08/2015 12.00',
                                       plannedEndTime:  '11/09/2015 12.30',
                                       executionTime: 33.00,
                                       status: "Failed"
                                   },
                                   {
                                       id: 4,
                                       name: "Test 4",
                                       startTime: '11/01/2015 00.00',
                                       actualEndTime:  '11/08/2015 12.00',
                                       plannedEndTime:  '11/09/2015 12.30',
                                       executionTime: 27.00,
                                       status: "Failed"
                                   },
                                   {
                                       id: 5,
                                       name: "Test 5",
                                       startTime: '11/01/2015 00.00',
                                       actualEndTime:  '11/08/2015 12.00',
                                       plannedEndTime:  '11/09/2015 12.30',
                                       executionTime: 32.00,
                                       status: "Failed"
                                   },
                                   {
                                       id: 6,
                                       name: "Test 6",
                                       startTime: '11/01/2015 00.00',
                                       actualEndTime:  '11/08/2015 12.00',
                                       plannedEndTime:  '11/09/2015 12.30',
                                       executionTime: 5.00,
                                       status: "Failed"
                                   }
                                   ,
                                   {
                                       id: 7,
                                       name: "Test 7",
                                       startTime: '11/01/2015 00.00',
                                       actualEndTime:  '11/08/2015 12.00',
                                       plannedEndTime:  '11/09/2015 12.30',
                                       executionTime: 1.00,
                                       status: "Failed"
                                   }
                                   ,
                                   {
                                       id: 8,
                                       name: "Test 8",
                                       startTime: '11/01/2015 00.00',
                                       actualEndTime:  '11/08/2015 12.00',
                                       plannedEndTime:  '11/09/2015 12.30',
                                       executionTime: 2.00,
                                       status: "Failed"
                                   }
                                   ,
                                   {
                                       id: 9,
                                       name: "Test 9",
                                       startTime: '11/01/2015 00.00',
                                       actualEndTime:  '11/08/2015 12.00',
                                       plannedEndTime:  '11/09/2015 12.30',
                                       executionTime: 8.00,
                                       status: "Failed"
                                   }
                                   ,
                                   {
                                       id: 10,
                                       name: "Test 10",
                                       startTime: '11/01/2015 00.00',
                                       actualEndTime:  '11/08/2015 12.00',
                                       plannedEndTime:  '11/09/2015 12.30',
                                       executionTime: 11.00,
                                       status: "Failed"
                                   }
                                   ,
                                   {
                                       id: 11,
                                       name: "Test 11",
                                       startTime: '11/01/2015 00.00',
                                       actualEndTime:  '11/08/2015 12.00',
                                       plannedEndTime:  '11/09/2015 12.30',
                                       executionTime: 7.00,
                                       status: "Failed"
                                   }
                                   ,
                                   {
                                       id: 12,
                                       name: "Test 12",
                                       startTime: '11/01/2015 00.00',
                                       actualEndTime:  '1/09/2015 12.00',
                                       plannedEndTime:  '1/9/2015 12.30',
                                       executionTime: 3.00,
                                       status: "Success"
                                   }
                                ];


                $('#tcExecDetails').dataTable(
                                        {
                                            "aaData": mydata,
                                            "aoColumns":
                                            [
                                                { "mData": 'id', sDefaultContent: "" },
                                                { "mData": 'name', sDefaultContent: "" },
                                                { "mData": 'startTime', sDefaultContent: "" },
                                                { "mData": 'actualEndTime', sDefaultContent: "" },
                                                { "mData": 'plannedEndTime', sDefaultContent: "" },
                                                { "mData": 'executionTime', sDefaultContent: "" },
                                                { "mData": 'status', sDefaultContent: "" }
                                            ],

                                            "bPaginate": true,
                                            "bLengthChange": true,
                                            "bFilter": true,
                                            "bSort": true,
                                            "bInfo": true,
                                            "bAutoWidth": false,
                                            "bStateSave": false,
                                            "idisplayLength": 2
                                        });



            }
            catch (err) {
                console.log("Error in operation! " + err);
            }

        });

    </script>