I have an application wherein I want to show table as a card list layout i.e. the each record/row would be a separate card and 3 such cards should be displayed in a row.I also want an infinite scroll with server side rendering.
scenario:
total records are 105 and the length of the records is 30 but after scroll, it renders blank area and after 2nd/3rd draw the cards are displaying again.
Please find example below.
$(document).ready(function () {
$(document).on('preInit.dt', function (e, settings) {
let api = new $.fn.dataTable.Api(settings);
api.page.len(30);
});
var dtable = $('#paginatedTable').dataTable({
"processing": true,
"serverSide": true,
"searching": true,
"deferRender": false,
"order": [[0, "asc"]],
"ajax": {
"url": "/users/paginated/mysql"
},
"scrollY": '300px',
"scroller": {
" loadingIndicator": true,
},
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "salary" }
],
"createdRow": function (row, data, index) {
if (data.id) {
$('td', row).eq(0).addClass('text-left position-absolute l-0');
$('td', row).eq(1).addClass('text-right position-absolute r-0');
$('td', row).eq(1).addClass('alert-danger');
}
},
});
$('#search').on('keyup', function () {
dtable.fnFilter(this.value);
});
$("#sortingId").change(function () {
dtable.fnSort([0, $("#sortingId").val()]);
});
$("#sortingName").change(function () {
dtable.fnSort([1, $("#sortingName").val()]);
});
});
Screenshot:
Failure Scenario-above mentioned scenario
working scenario-if there is only one card in a row, scrolling is working fine
Related
I would like to update the MDB Datatable data in OctoberCMS partial with the latest data. Without the beforeUpdate function, it would retrieve the latest data but without the datatable. With the beforeUpdate function, it shows "cannot reinitialize datatable".
$.request('onFilter', {
data:{
'year':$("select[name='year']").val(),
},
update: {
'site/result': '#result'
},
beforeUpdate: function() {
if ( $.fn.DataTable.isDataTable('#result') ) {
$('#result').DataTable().destroy();
}
$('#resultTbl tbody').empty();
$('#resultTbl').DataTable({
"pageLength": 25,
"pagingType": "simple_numbers",
"scrollY": 450,
})
},
})
Here I solved my problem. Destroy the datatable beforeUpdate, and reinitialize during complete.
$.request('onFilter', {
data:{
'month':$("select[name='month']").val(),
'year':$("select[name='year']").val(),
'department':$("select[name='department']").val(),
'employeeName':$("input[name='employee-name']").val()
},
update: {
'site/result': '#result'
},
beforeUpdate: function() {
$("#resultTbl").dataTable().fnDestroy();
},
complete: function(){
$('#resultTbl').DataTable({
"pageLength": 25,
"pagingType": "simple_numbers",
"scrollY": 450,
})
},
})
How to add action buttons in frontend vue.js when using server side dataTables?
here is what i have so far, this code is working, but action buttons not give the request when clicking. (the alert is not also firing). the action buttons are showing and calling to editTaxGroup()
$(document).ready(function() {
let tax = 1;
self.dataTable = $("#tax_groups2").DataTable({
serverSide: true,
ajax: {
"columns": [
{ "data": "tax_group_name" },
{ "data": "country.country_name" },
{ "data": "tax_rate_percentage" },
{ "data": "Edit" },
{ "data": "Delete" }
],
data: {
"token": localStorage.getItem("token"),
},
url: 'api/v1/get-tax-groups',
dataFilter: function(data){
var json = jQuery.parseJSON( data );
json.recordsTotal = 100;
json.recordsFiltered = 100;
self.tax_groups = data.data;
return JSON.stringify( json ); // return JSON string
}
},
columns: [
{data: "tax_group_name"},
{data: "country.country_name",},
{data: "tax_rate_percentage"},
{data: "Edit"},
{data: "Delete"},
],
"columnDefs": [
{
"targets": [ -2 ],
"data":"id",
"defaultContent" : '<i class="fas fa-pen"></i>'
},
{
"targets": [ -1 ],
"data":"id",
"defaultContent" : '</i>'
}
],
});
})
$('#tax_groups2 tbody ').on('click', '#edit', function () {
for (let key in self.tax_groups){
alert(1)
console.log(key);
if(self.tax_groups.hasOwnProperty(key)){
console.log(`${self.tax_groups[key]}`)
}
}
} );
});
},
This isn't using Vue at all. You could actually more efficiently use Vue to generate these tables dynamically and set buttons as well. You may want to remove the Vue tag or re-ask the question.
I tried to bind the 'deselect' event to the KendoUI multiselect control using jquery. But seems like it is not firing: Here is the code:
$(document).ready(function () {
function multiselect_deselect(e) {
debugger;
if (e.item.context.localName == 'li') {
e.preventDefault();
}
}
var multiselectCtrl = $("#enterFeedbackForm_" + '#ContextId' + " #FeedbackCategoryList_" + '#ContextId').data("kendoMultiSelect");
multiselectCtrl.bind("deselect", multiselect_deselect);
});
the debugger point does not hit. We're using Kendo UI Kendo UI v2015.2.703
I think kendo-ui has a bound property for this already. If you take a look at the event documentation, it shows you how to bind the events on initialization of kendo ui multiselect:
$(document).ready(function() {
function onDeselect(e) {
debugger;
if (e.item.context.localName == 'li') {
e.preventDefault();
}
};
var data = [
{ text: "Africa", value:"1" },
{ text: "Europe", value:"2" },
{ text: "Asia", value:"3" },
{ text: "North America", value:"4" },
{ text: "South America", value:"5" },
{ text: "Antarctica", value:"6" },
{ text: "Australia", value:"7" }
];
$("#select").kendoMultiSelect({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
deselect: onDeselect,
});
});
I am very new to Datatables and this might be simple, but surely I am missing something. I am trying to create a button column that uses the filename of each row and uses it to make an ajax call to display a picture on click. What I get wrong is that, every button of the column displays the same image, and not the image of the filename for each row. Here is the code:
$.ajax ({
url: "http:// ...... /Services/DBPrintDatatable?customer_id=" + projectid,
type: "GET",
dataType: 'json',
async: false,
success: function(data) {
$('#projectsdt').show();
projectsTable = $('#projectsdt').DataTable({
"pageLength": 10,
"data": data,
"scrollX": true,
"aaSorting": [],
"columns": [
{ "data": "upload_date" },
{ "data": "filename" },
{ "data": "uploader" },
{ "data": "upload_place" },
{ "data": "is_ok" },
{ "data": "custom_verdict" },
{
data: { "data": "filename" },
render: function ( data, type, row ) {
return "<a data-fancybox='gallery' class='btn btn-success' href='http://......./Services/DBShowImage?filename='+ { 'data': 'filename' }>Show</a>";
}
},
] ,
});
Thank you in advance!
If the image url required is like
http://......./Services/DBShowImage?filename=filenameFromData
Then you should generate it first inside the render like below code
href='http://......./Services/DBShowImage?filename="+ row.filename+"';
render: function ( data, type, row ) {
return "<a data-fancybox='gallery' class='btn btn-success' href='http://......./Services/DBShowImage?filename="+ row.filename+"'>Show</a>";
}
sorry for my bad english,
i want to show image in my table using datatables.
var t = $("#mytable").dataTable({
initComplete: function() {
var api = this.api();
$('#mytable_filter input')
.off('.DT')
.on('keyup.DT', function(e) {
if (e.keyCode == 13) {
api.search(this.value).draw();
}
});
},
oLanguage: {
sProcessing: "loading..."
},
processing: true,
serverSide: true,
ajax: {"url": "wisataadmincontroller/json", "type": "POST"},
columns: [
{
"data": "id_wisata",
"orderable": false
},{"data": "nama_wisata"},{"data": "alamat_wisata"},{"data": "no_telp"},{"data": "kategori"},{"data": "longitude"},{"data": "latitude"},{"data": "gambar","render": function(data, type, row) {
return '<img src="'+data+'"style="height:100px;width:100px;" />';
}},{"data": "like"},
{
"data" : "action",
"orderable": false,
"className" : "text-center"
}
],
order: [[0, 'desc']],
rowCallback: function(row, data, iDisplayIndex) {
var info = this.fnPagingInfo();
var page = info.iPage;
var length = info.iLength;
var index = page * length + (iDisplayIndex + 1);
$('td:eq(0)', row).html(index);
}
});
});
and the result :the images are empty
the images are empty because the image source only contains the images file name,
so how to use baseurl in datatables?
Just plug it in?
<img src="<?php echo base_url(); ?>'+data+'"style="height:100px;width:100px;" />