Data tables searching ,sorting not working

Question

I use Datatable in my code but searching and sorting and pagination is not working There is static function which i call. Data is display successfully in table but search is not working when i search any data this show "no matching records " where as the text which i enter is exist in table

Check GIF Image

https://i.sstatic.net/YDK1S.gif

this is what i try

<table id="example"   class="display nowrap cell-border" style="width:100%;" cellspacing="0">
  </table>


<script type="text/javascript">
       success: function (result) {
                $("#example").empty()
                if (re.length > 0) {
                    $("#example").append
                    ("<thead><tr><th>Service Type</th><th>Service frequency</th><th>Last performed</th><th>Next Service</th><th>Create reminder</th></tr></thead>");
                    for (var i = 0; i < re.length; i++) {
                        if (re[i] !== null) {
                            $("#example").append("<tbody><tr><td>" +
                                re[i][0] + "</td><td>" +
                                re[i][1] + "</td><td>" +
                                re[i][2] + "</td><td>" +
                                re[i][3] + "</td><td>" +
                                re[i][4] + "</td></tr></tbody>");

                            sdate = re[i][2];
                        }      
                             }
                }
                var myTable = $('#example').DataTable();
            },

    </script>

LINKS

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.3.js"></script> 
     <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
     <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script> 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script> 
     <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script> 
     <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script> 
     <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script> 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
     <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />

   <link href=" https://cdn.datatables.net/buttons/1.2.2/css/buttons.bootstrap.min.css" rel="stylesheet" />
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.bootstrap.min.js"></script> 
   <link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet" />

CHECK gif image

Answer 1

I know this is an old post, but I was able to resolve a similar problem myself today with a very simple solution. I found an answer on the DataTables forums https://datatables.net/forums/discussion/38873/datatables-sorting-does-not-work-at-all-and-filtering-acts-weird

Basically, I was displaying data in a foreach loop and just like the poster from the link above, I was repeating my <tbody></tbody> block for each loop iteration, preventing the DataTables from functioning as intended. (This will also allow for the grey/white striping to show.)

Answer 2

I do this

 $("#example").empty()

                if (re.length > 0) {


                    $('#example thead').append(
                    "<tr><th>Service Type</th><th>Service frequency</th><th>Last performed</th><th>Next Service</th><th>Create reminder</th></tr>"
                       );

                    for (var i = 0; i < re.length; i++) {
                        if (re[i] !== null) {
                            $('#example tbody').append('<tr><td>' + re[i][0] + '</td><td>' + re[i][1] + '</td><td>' + re[i][2] + '</td><td>' + re[i][3] + '</td><td>' + re[i][4] + '</td></tr>');
                        }
                    }
                }

<table id="example"   class="display nowrap cell-border" style="width:100%;" cellspacing="0">
                     <thead></thead>
                <tbody></tbody>
                 </table>

and this works for me because i generate table wrong as i post code in question like this

$('#example ').append("<thead><tr><th></th></tr></thead>

i recode like this

 $('#example thead').append(tr><th></th></tr>);

same i do this for tbody and this works perfect for me

Answer 3

Please try with the below code i have created sample fiddle with test data

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
           <tr>
           <th>Service Type</th>
           <th>Service frequency</th>       
           </tr>
        </thead>
        <tbody id="tabledata">      
        </tbody>
    </table>

    $(document).ready(function() {
        var myTable = $('#example').DataTable();
        success: function(result) {
                $("#tabledata").empty()
                if (re.length > 0) {
                    for (var i = 0; i < re.length; i++) {
                        if (re[i] !== null) {

                            myTable.row.add([re[i][0], re[i][1], re[i][2], re[i][3], re[i][4]]).draw();

                            sdate = re[i][2];
                        }
                    }
                }

            },

    });