troubleshooting Question

DataTables with webapi

Avatar of ITsolutionWizard
ITsolutionWizardFlag for United States of America asked on
JavaScriptC#.NET MVC
5 Comments1 Solution19 ViewsLast Modified:
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>
    


 <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>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 5 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros