Link to home
Start Free TrialLog in
Avatar of ITsolutionWizard
ITsolutionWizardFlag 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

Avatar of Zvonko
Zvonko
Flag of North Macedonia image

As far as I can remember your API has also have to support server side search and paging.
For your testing is the amount of rows so small that it need not to search or page server side but you have to implement that functionality on server side.
Did you implement this parameters in your API:
https://datatables.net/manual/server-side


Avatar of ITsolutionWizard

ASKER

I do not want to use datatables API. Just want to stay with current UI in Javascript. If you do not know, it is okay. we can wait for other experts.

Change this line:
 $('#data-table').append(tr);

to this:
$('#data-table tbody').append(tr);
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi,

I'm using Datatables everyday, it is powerfull but have a learning curve.
First you need to create your package to make sure you have all the extension you need.
If you select Bootstrap in framework (this is what I use), then select Datatables in package (not the Bootstrap package)
This is a common error, I know this is confusing.
Select all extension even if you are not using all, this way if you change your mind later you will have everything in your package. https://datatables.net/download/

Always create your tables using static data first, configure the Datatables when this does all you need, then add the data from other sources...
https://datatables.net/examples/data_sources/ajax.html
https://datatables.net/manual/ajax#Data-array-location

This way you will see if the search box, sorting, and paging not working.
Also check the browser console for errors Chrome right click inspect.

If you try to do everything in one shot it won't work.

You can append row manually (custom JS code) or use Datatables method.
https://datatables.net/examples/data_sources/ 

You can use their server-side method or not
https://datatables.net/manual/server-side

There are a lot of try/error, having data from other API / EDI is another thing that you can tried the code without Datatables then when you know how it's working you can merge everything.

So split the work, this way that will be easier to complete the job.