kt-data table pagination and sorting search is not working properly
when i click on the next page of the data table it redirects back to the first one and also the global search is not working am using version 7 of metronic
Replies (6)
Hi Hussain Wael
Could you please specify which demo page you are referring to? This information will help us better understand the issue you are facing in the Data Table.
Thank you
first demo my friend v-7 and its not working on server only
There might be an issue with your API URL or how it's configured in your ktdatatable setup. Here's how you can troubleshoot:
Verify that the API URL you've configured in your ktdatatable setup is correct. Ensure that it's accessible and returns the expected data.
Share your ktdatatable code so we can help you troubleshoot further.
If the ktdatatable works locally but not on the server, there might be an issue with the server configuration. Check if the server allows the necessary pagination, sorting, and searching requests.
We can give more specific assistance if you provide more details or code snippets.
here is my code :
`` "use strict";
// Class definition
var datatable;
var KTDatatableRemoteAjaxDemo = function () {
// Private functions
// basic demo
var demo = function () {
datatable = $('.kt-datatable').KTDatatable({
// datasource definition
data: {
type: 'remote',
source: {
read: {
url: window.data_url,
map: function (raw) {
// sample data mapping
var dataSet = raw;
if (typeof raw.data !== 'undefined') {
dataSet = raw.data;
}
return dataSet;
},
method: 'GET',
},
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
columnDefs: window.columnDefs,
saveState :{
cookie : false,
webstorage :false,
}
},
stateSave: false,
// records: {
// processing: 'جاري التØميل...',
// noRecords: 'لا توجد نتائج'
// },
// toolbar:{
//
// pagination:{
// items:{
// default: {
// first: 'الأول',
// prev: 'السابق',
// next: 'التالي',
// last: 'الأخير',
// more: 'المزيد',
// input: 'رقم الصÙØØ©',
// select: 'Øدد عدد العناصر'
// },
// info: 'عرض {{start}} - {{end}} من {{total}} السجلات'
// }
// }
// }
// },
// layout definition
layout: {
scroll: false,
footer: false,
},
// column sorting
sortable: true,
sort: {
asc: 'la la-arrow-up',
desc: 'la la-arrow-down'
},
pagination: true,
search: {
input: $('#generalSearch'),
},
// columns definition
columns: window.columns,
});
};
return {
// public functions
init: function () {
demo();
},
};
}();
jQuery(document).ready(function () {
KTDatatableRemoteAjaxDemo.init();
}); ``
``
window.data_url = '{{url('panel/quotations/datatable')}}';
window.columns = [
{
field: 'checkbox',
title: '',
template: function(data) {
return '<input type="checkbox" value="' + data.id + '" class="select-quotation">';
},
width: 30,
sortable: false
},
{
field: 'rfq_id',
title: "@lang('ID')",
width: 100,
sortable: false,
textAlign: "center",
},
{
field: ' ',
title: "@lang('ID')",
width: 100,
sortable: false,
textAlign: "center",
template: function (data, index, datatable) {
return ((datatable.getCurrentPage() - 1) * datatable.getPageSize()) + index + 1;
}
}, {
field: 'admin_id',
title: "@lang('Admin')",
textAlign: "center",
template: function (data) {
return data.admin.name;
},
}, {
field: 'user_id',
title: "@lang('Client')",
textAlign: "center",
template: function (data) {
return data.user.name;
},
},
{
field: 'currency_id',
title: "@lang('Currency')",
textAlign: "center",
template: function (data) {
return data.currency.name;
},
}, {
field: 'total',
title: "@lang('Total')",
textAlign: "center",
}, {
field: 'id',
title: "@lang('id')",
textAlign: "center",
}, {
field: 'discount',
title: "@lang('Discount %')",
textAlign: "center",
}, {
field: 'fax',
title: "@lang('Fax')",
textAlign: "center",
},
{
field: 'enter_date',
title: "@lang('Date')",
textAlign: "center",
},
@can('add_quotations')
{
field: 'Actions',
title: "@lang('Actions')",
sortable: false,
overflow: 'visible',
textAlign: "center",
autoHide: false,
width: 100,
template: function (data) {
var editUrl = "{{ url('panel/quotations/') }}/" + data.id + "/edit";
var deleteUrl = "{{ url('panel/quotations/') }}/" + data.id;
var printUrl = '{{url('panel/quotations/actions')}}' + '/' + data.id + "/print";
var pdfUrl = '{{url('panel/quotations/actions')}}' + '/' + data.id + "/pdf";
var emailUrl = '{{url('panel/quotations/actions')}}' + '/' + data.id + "/send";
return `
<input value=` + data.id + ` type="hidden" class="id">
<div class="dropdown">
<i class="la la-cog"></i>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item print" href="javascript:;" data-url="` + printUrl + `"><i class="la la-print"></i> @lang('Print') </a>
<a class="dropdown-item pdf" href="javascript:;" data-url="` + pdfUrl + `"><i class="la la-file-pdf-o"></i> @lang('Print Pdf') </a>
<a class="dropdown-item send" href="javascript:;" data-url="` + emailUrl + `"><i class="la la-envelope"></i> @lang('Send Email') </a>
<a class="dropdown-item convertToPO" href="javascript:;" data-><i class="la la-plus"></i> @lang('Convert to PO') </a>
@if(auth()->user()->can('edit_quotations'))
<a class="dropdown-item" href="` + editUrl + `"><i class="la la-edit"></i> @lang('Edit') </a>
@endif
@if(auth()->user()->can('delete_quotations'))
<a class="dropdown-item delete" href="#" data-url="` + deleteUrl + `"><i class="la la-times"></i> @lang('Delete')</a>
@endif </div>
</div>`;
},
}
@endcan
]; ``
Hi Hussain Wael
Could you please check the console log for any errors that might help diagnose the issue?
The KTDatatable component has been deprecated in Metronic. If you're working on a new project, it's recommended to consider updating to Metronic version 8, which offers a more modern and supported datatable component. Upgrading to the latest version can help you avoid compatibility issues and take advantage of new features and improvements.
Thank you
here is no errors in console
