ITsolutionWizard
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.
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>
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);
$('#data-table').append(tr);
to this:
$('#data-table tbody').append(tr);
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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.
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