Avatar of ITsolutionWizard
ITsolutionWizard
Flag for United States of America

asked on 

DataTables with webapi

https://datatables.net/examples/basic_init/filter_only.html
I am first time using datatable in js. and have some minor issues.
1. Do you know why the search box & sorting, and paging not working?
You can just pay attention on javascript part because all of the API is working.


  <link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>        
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    

Open in new window



 <script>
        $(document).ready(function() {
            $('#data-table').DataTable(
                {
                            "dom": 'Bfrtip',                            
                            "buttons": ['copyHtml5', 'excelHtml5', 'pdfHtml5', 'csvHtml5'],
                            "paging": true,
                            "ordering": true,
                            "info": true,
                            "bDeferRender": true,
                            "pageLength": 100,
                            "scrollY": 600,
                            "bSort": true,
                            "stateSave": true,
                            "fixedHeader": true,
                            "responsive": true,
                            "bDestroy": true
                }            
            );  
            GetFleetListPost();
                 
        });
         
    </script>
    <script type="text/javascript">                                          
         function GetFleetListPost()
         {
              var tr;
              var model = {'FleetMasterType': 'Tow' };
              $.ajax({
               type: "POST",
               url: "https://www.test.net/api/api/Fleet/GetFleetList?type=json",                            
               dataType: "json",
               contentType: "application/json;charset=utf-8",
               data: JSON.stringify(model),
               success: function (data) {
                   $.each(data, function (index) {
                       //alert(data[index].Make + ' ' + data[index].Model);
                       tr = tr + "<tr>";
                       tr = tr + "<td>" + data[index].Make + "</td>";
                       tr = tr + "<td>" + data[index].Model + "</td>";
                       tr = tr + "</tr>";
                   });
                   //document.getElementById("data-table-tr").innerHTML = tr;
                   $('#data-table tbody').empty();
                   $('#data-table').append(tr);
                   return tr;
                },
               error: function (error) {
                alert("Error " + error);
                }              
             });            




         }
    </script>

Open in new window

.NET MVCJavaScriptC#

Avatar of undefined
Last Comment
lenamtl

8/22/2022 - Mon