Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)


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



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 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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(