My current problem is how could I properly perform pagination in DataTable to generate lengthMenu (Showing 1 to 10 of 57 entries) dynamically and only load data when next page is clicked.
So far my understanding on server-side processing is like this:My web service is returning data from database using MySQL with limit and offset in JSON format. Assuming that the JSON data is correct how could I properly paginate my DataTable?
Below is my code:
var Table1 = $('#table').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": SomeWorkingURLS,
"dataType": "jsonp"
},
"columns": [
{ "data": "Column1" },
{ "data": "Column2" },
{ "data": "Column3" },
{ "data": "Column4" }
],
"columnDefs": [
{
"render": function ( data, type, row ) {
return data + "<hr>" + row.data1;
},
"targets": 0
},
{
"render": function ( data, type, row ) {
return data + "<br>" + row.data2 ;
},
"targets": 1
},
{
"render": function ( data, type, row ) {
return data ;
},
"targets": 2
},
{
"render": function ( data, type, row ) {
if (row.status == '2'){
return '<button class="fas fa-edit btn-success" data-toggle="tooltip" title="Edit" value="' + data + '">Verify</button>'
+ ' <button class="fas fa-undo btn-danger" data-toggle="tooltip" title="Resend" value="' + data + '"> Authenticate</button>';
}
else{
return '<button class="fas fa-edit btn-success" data-toggle="tooltip" title="Edit" value="' + data + '">Authenticate</button>';
}
},
"targets": 3
},
{ "width": "14%", "targets": 0 },
{ "width": "60%", "targets": 1 },
{ "width": "10%", "targets": 2 },
{ "width": "16%", "targets": 3 , "class":"dt-center"},
],
"destroy": true,
"searching" :false
});
Table1.draw();
$("select[name*='table_outbound_shipment_list']").removeClass('form-control');
$("#table_outbound_shipment_list_length").remove();
$('.form-control.form-control-sm').removeClass('form-control');
My web service would always return 10 row of data (or am I doing wrong here?)
My reference:https://datatables.net/examples/data_sources/server_side
There are libraries and helper classes for server-side processing that help with preparing server-side response.
For example, DataTables distribution includes ssp.class.php helper calss and sample script to aid in generating response if you're using PHP.
Otherwise, you can inspect sent parameters and paginate your results based on start and length request parameters.
Related
I am trying to pass value parameter through the ajax call to the controller. It is a date value. I am struggling to find a way to pass parameters through this ajax url. Please help.
function dataTable() {
var value = $("#somedatevalue).val();
$("#thisTable").DataTable({
"processing": true,
"paging": false,
"language": {
processing: "<span class='processing-message'><i class='fa fa-circle-o-notch fa-spin'></i> Processing...</span>"
},
ajax: {
url: $('table#thisTable').data("ajaxurl"),
type: "POST",
datatype: "json",
},
"columns": [
{
"data": "column1",
},
{
"data": "column2",
},
{
"data": "column3",
},
{
"data": "column4",
},
{
"data": "column5",
},
{
"data": "Url",
"render": function (data) {
return '<a class="btn btn-info" href="' + data + '">Select</a>';
}
}
],
"dom": 't<"col-lg-3"l><"col-lg-6"p><"col-lg-3"i>'
});
}
You can pass value as query parameter like http://www.url.com?date="17-02-21"
If you are using php use can get the value as $_GET['date']
If you are using node js, you can get value as req.query.date
Consider the following.
function dataTable() {
$("#thisTable").DataTable({
"processing": true,
"paging": false,
"language": {
processing: "<span class='processing-message'><i class='fa fa-circle-o-notch fa-spin'></i> Processing...</span>"
},
"ajax": {
"url": $('table#thisTable').data("ajaxurl"),
"type": "POST",
"data": { "someDate": $("#somedatevalue").val() },
"datatype": "json"
},
"columns": [
{
"data": "column1",
},
{
"data": "column2",
},
{
"data": "column3",
},
{
"data": "column4",
},
{
"data": "column5",
},
{
"data": "Url",
"render": function (data) {
return '<a class="btn btn-info" href="' + data + '">Select</a>';
}
}
],
"dom": 't<"col-lg-3"l><"col-lg-6"p><"col-lg-3"i>'
});
}
First you must address the Typo in your jQuery Selector. Then you can adjust your Ajax parameters to include a data.
See more here: https://datatables.net/reference/option/ajax.data
In principle it operates in exactly the same way as jQuery's $.ajax.data property, in that it can be given as an object with parameters and values to submit, but DataTables extends this by also providing it with the ability to be a function, to allow the data to be re-evaluated upon each Ajax request (see above).
I am working on an ASP.NET Core 2.1 website and I am using Datatables.net to display my record lists retrieved from a backend API.
This issue I am trying to resolve is that, whenever an error occurs while retrieving the data from the backend API, I want the error message to appear in a Bootstrap alert-error DIV on the same page as the datatable.
I have looked at https://datatables.net/forums/discussion/30033/override-default-ajax-error-behavior and Enable datatable warning alert but I am not strong in javascript so I am having some difficulty determining how to implement this feature.
Currently, I have the datatable set up in my cshtml page as follows;
<script>
jQuery(document).ready(function ($) {
var table = $("#sitelist").DataTable({
"processing": true,
"serverSide": true,
"filter": true,
"orderMulti": false,
"ajax": {
"url": "/Sites/LoadData",
"type": "POST",
"datatype": "json"
},
"columnDefs": [
{ "orderable": false, "targets": 6 },
{ "className": "text-center", "targets": [4, 5] },
{
"targets": [4, 5],
"createdCell": function(td, cellData, rowData, row, col) {
if (cellData) {
$(td).html('<i class="far fa-check-circle text-primary""></i>');
} else {
$(td).html('<i class="far fa-times-circle text-danger""></i>');
}
}
}
],
"columns": [
{ "data": "Id", "name": "Id", "autoWidth": true, "defaultContent": "" },
{ "data": "SiteName", "name": "SiteName", "autoWidth": true, "defaultContent": "" },
{ "data": "CompanyId", "name": "CompanyId", "autoWidth": true, "defaultContent": "" },
{ "data": "CompanyName", "name": "CompanyName", "autoWidth": true, "defaultContent": "" },
{ "data": "IsAdminSite", "name": "IsAdminSite", "autoWidth": true, "defaultContent": "" },
{ "data": "IsEnabled", "name": "IsEnabled", "autoWidth": true, "defaultContent": "" },
{
"render": function (data, type, full, meta) { return `<i class="far fa-edit text-primary" title="Edit">`; }
}
],
// From StackOverflow http://stackoverflow.com/a/33377633/1988326 - hides pagination if only 1 page
"preDrawCallback": function (settings) {
var api = new $.fn.dataTable.Api(settings);
var pagination = $(this)
.closest('.dataTables_wrapper')
.find('.dataTables_paginate');
pagination.toggle(api.page.info().pages > 1);
}
});
});
</script>
And here is the loaddata action in my SitesController class;
public async Task<IActionResult> LoadData()
{
try
{
await SetCurrentUser();
ViewData["Role"] = _currentRole;
var draw = HttpContext.Request.Form["draw"].FirstOrDefault();
var start = Request.Form["start"].FirstOrDefault();
var length = Request.Form["length"].FirstOrDefault();
var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault();
var sortColumnDirection = Request.Form["order[0][dir]"].FirstOrDefault();
var searchValue = Request.Form["search[value]"].FirstOrDefault();
var pageSize = length != null ? Convert.ToInt32(length) : 0;
var skip = start != null ? Convert.ToInt32(start) : 0;
var request = new SitesGetListRequest
{
OrderBy = SetOrderBy(sortColumn, sortColumnDirection),
Filter = SetFilter(searchValue),
PageNumber = (skip / pageSize) + 1,
PageSize = pageSize
};
var tokenSource = new CancellationTokenSource();
var token = tokenSource.Token;
var endpoint = $"api/companies/{SetCompanyId()}/sites/filtered";
var siteData = await _client.GetSiteListAsync(request, endpoint, token);
if (siteData.Sites != null)
{
return Json(new
{
draw,
recordsFiltered = siteData.Paging.TotalCount,
recordsTotal = siteData.Paging.TotalCount,
data = siteData.Sites.ToList()
});
}
//TODO: Find a way to pass error to a Bootstrap alert-warning DIV rather than the jQuery (javascript) alert box
var errorMessage = $"Http Status Code: {siteData.StatusCode} - {siteData.ErrorMessages.FirstOrDefault()}";
return Json(new
{
data = "",
error = errorMessage
});
}
catch (Exception ex)
{
const string message = "An exception has occurred trying to get the list of Site records.";
_logger.LogError(ex, message);
throw;
}
}
As it stands right now, If an error exists in the object returned from the API call, I pass a message to the error property in the returned json and it shows up as an javascript alert popup box on my cshtml page and when I click OK, the datatable displays "No records found", as shown in the images below;
and...
What I want is for the error message to display in a bootstrap alert-danger div at the top of the cshtml page. I so not want the alert popup to appear and I still want the datatable to show "No records found".
I think that what I am looking for is described on Enable datatable warning alert...
Disable the alert popup by using
$.fn.dataTable.ext.errMode = 'none';
And pass the error message to the BootStrap div using
$('#example')
.on( 'error.dt', function ( e, settings, techNote, message ) {
console.log( 'An error has been reported by DataTables: ', message );
} )
.DataTable();
but instead of
console.log( 'An error has been reported by DataTables: ', message );
use something like
$("#error").html(MY ERROR MESSAGE HERE);
and assign id="error" to the bootstrap div.
But, I am having trouble figuring out how to trigger the Ajax call from my loaddata method in the SitesController and also how to correctly add the error event to the beginning of my datatable script.
Before I burn more time trying to work this out, I thought I would put this on SO and see if anyone with javascrit/jquery experience can provide some guidance.
You can add the error property to the ajax call. Probably the best will be to use fnServerData.
jQuery(document).ready(function ($) {
var table = $("#sitelist").DataTable({
"processing": true,
"serverSide": true,
"filter": true,
"orderMulti": false,
"sAjaxSource": "/Sites/LoadData",
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"cache": false,
"success": function (data) {
fnCallback(data);
},
"error": function(error){
$("#error").html(error);
}
});
},
"columnDefs": [
{ "orderable": false, "targets": 6 },
{ "className": "text-center", "targets": [4, 5] },
{
"targets": [4, 5],
"createdCell": function(td, cellData, rowData, row, col) {
if (cellData) {
$(td).html('<i class="far fa-check-circle text-primary""></i>');
} else {
$(td).html('<i class="far fa-times-circle text-danger""></i>');
}
}
}
],
"columns": [
{ "data": "Id", "name": "Id", "autoWidth": true, "defaultContent": "" },
{ "data": "SiteName", "name": "SiteName", "autoWidth": true, "defaultContent": "" },
{ "data": "CompanyId", "name": "CompanyId", "autoWidth": true, "defaultContent": "" },
{ "data": "CompanyName", "name": "CompanyName", "autoWidth": true, "defaultContent": "" },
{ "data": "IsAdminSite", "name": "IsAdminSite", "autoWidth": true, "defaultContent": "" },
{ "data": "IsEnabled", "name": "IsEnabled", "autoWidth": true, "defaultContent": "" },
{
"render": function (data, type, full, meta) { return `<i class="far fa-edit text-primary" title="Edit">`; }
}
],
// From StackOverflow http://stackoverflow.com/a/33377633/1988326 - hides pagination if only 1 page
"preDrawCallback": function (settings) {
var api = new $.fn.dataTable.Api(settings);
var pagination = $(this)
.closest('.dataTables_wrapper')
.find('.dataTables_paginate');
pagination.toggle(api.page.info().pages > 1);
}
});
});
</script>
I have been working with datatables for a couple of weeks and I have this custom datatables that I'm identifying by class (tableIdentifyClass):
var handleDataTable = function () {
if ($("." + tableIdentifyClass).length) {
table = $("." + tableIdentifyClass).DataTable({
aaData: dataForTable,
aoColumns: [
{ mData: "IsDefault", title: "" },
{ mData: "Name", title: "Name" },
{ mData: "Icon", title: "Icon" },
{ mData: "IsDefault", title: "" }],
"order": [[1, "asc"]],
"bAutoWidth": false,
"lengthChange": false,
"columnDefs": [{
"targets": 0,
"render": function (data, type, full, meta) {
if (type === 'display') {
if (!data)
return '<span class="fa-xs"><i class="fa fa-edit" style="font-size:125%" onclick:""></i></span>';
else return '<span></span>';
}
return (isNaN(data)) ? -1 : +data;
}
},
{
"targets": 2,
"render": function (data, type, full, meta) {
if (type === 'display') {
if (data != '')
return '<span class="fa-xs"><i class="fa ' + data + '" style="font-size:125%"></i></span>';
else return '<span>-</span>';
}
return (isNaN(data)) ? -1 : +data;
}
},
{
"targets": 3,
"render": function (data, type, full, meta) {
if (type === 'display') {
if (!data)
return '<a class="fa-xs"><i class="fa fa-times" style="font-size: 125%; color: red;" onclick="deletePrefLocally(' + full.UId + ',' + full.Id + ',\'' + tableIdentifyClass + '\')"></i></a>';
else return '<span></span>';
}
return (isNaN(data)) ? -1 : +data;
}
}]
});
}
}
The data for the table (dataForTable):
[ { "Icon": "fa-exclamation-circle", "IsDefault": true, "Name": "Nixon", "UId": 1 },
{ "Icon": "fa-exclamation-circle", "IsDefault": false, "Name": "Tiger", "UId": 2 }]
I'm trying to delete the second row by calling function deletePrefLocally
function deletePrefLocally(uId, deletedId, tableIdentifyClass) {
var crtUsage = dataForTable; //same items as the table
var inItems = crtUsage.filter(function (elem) {
return elem.Id === deletedId; // find the item with the same id
})[0];
var found = crtUsage.indexOf(inItems);
if (found != -1) crtUsage.splice(found, 1);
table = $("." + tableIdentifyClass);
datatable = table.DataTable();
datatable.clear();
datatable.rows.add(crtUsage).draw();
}
My problem is that the last row datatable.rows.add(crtUsage).draw(); pops-up a message: DataTables warning: - Request unknows parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4
Why is not applying the new content? Why after closing the error box I have two search areas and paging and all the values are null? What am I doing wrong?
You've defined "IsDefault" twice in your column list.
aoColumns: [
{ mData: "IsDefault", title: "" },
{ mData: "Name", title: "Name" },
{ mData: "Icon", title: "Icon" },
{ mData: "IsDefault", title: "" }],
I suspect you meant to have "UId" for the last one, as that is included in the data.
Found the reason... After all the page was loaded I've checked if based on tableIdentifyClass I'll receive true after calling $.fn.DataTable.isDataTable( '.' + tableIdentifyClass) but it was false. When calling datatable = table.DataTable(); I was creating a datatable inside the existing one, duplicate search area and paging :( I've tried to save all the "tables" after initialization inside an global array and search for it in order to add the new rows. Perhaps this is not the best solution but it worked for me.
i created a table with jquery datatables. when I want to filter my table with search bar, the browser gives me an alert DataTables warning: table id=grid - Ajax error. For more information about this error, please see http://datatables.net/tn/7.
this is my code :
$("#grid").dataTable({
"processing": true, // control the processing indicator.
"serverSide": true, // recommended to use serverSide when data is more than 10000 rows for performance reasons
"info": true, // control table information display field
"stateSave": true, //restore table state on page reload,
"searching": true,
"language": {
"url": "/translate/datatables.fa-IR.json"
},
"lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]], // use the first inner array as the page length values and the second inner array as the displayed options
"ajax": {
"url": serviceBase + "/Auth/Admin/SearchOrders2/",
"type": "GET",
'beforeSend': function (xhr) {
xhr.setRequestHeader("Authorization", "Bearer " + localStorageService.get("authorizationData").token);
}
},
"columns": [
{ "data": "customerContact", "orderable": true },
{ "data": "isDone", "orderable": true },
{
"mRender":
function (data, type, row) {
var xxx = $scope.name1 = $filter("jalaliDateFromNow")(row["createdDate"]);
return "<span>" + $filter("jalaliDateFromNow")(row["orderCreationTime"]); +'</span>';
}, "orderable": true
},
{ "data": "totalPrice", "orderable": true },
{ "data": "count", "orderable": true },
{ "data": "description", "orderable": true },
{
"mRender": function (data, type, row) {
return '<button class="btn btn-sm btn-circle green tooltips" disabled="disabled"><i class="fa fa-check"></i><span>جزئیات</span></button>'
},
"orderable": false
}
],
"order": [[0, "desc"]]
});
which part of my code is wrong?
I need to pass the Value of the first column into the second column render function() to make a hyperlink where the value of the first column is parameter. of the hyperlink.
"Columns": [
{
"data": "Code", "autoWidth": true,
},
{ "data" : "StyleReference","autoWidth": true,
"render": function (data, oObj) {
return '' + data + '';
}
}
]
Any Help Please!!
You're nearly there. The render function can take up to 4 variables. Your row represents the whole object, this should work:
"columns": [{
"data": "Code",
"autoWidth": true
}, {
"data": "StyleReference",
"autoWidth": true,
"render": function(data, type, row, meta) {
return '' + data + '';
}
}]
Hope that helps.