I'm using slick-list to build an element where people can insert their own slides.
The slider is supposed to show 4 slides, but sometimes the number of slides doesn't reach that much and the slider bugs, making slides smaller (in width) than they were supposed to be.
I've tried to use infinite:true but it didn't go as I expected.
Here's how my slick is:
`
$('.el-lista-slider-orcamento .itens').each(function(){
$(this).slick({
slidesToShow: 4
,infinite: true
,slidesToScroll: 1
,autoplay: false
,autoplaySpeed: 4000
,speed: 500
,easing: 'swing'
,swipeToSlide: true
,pauseOnHover: false
,pauseOnFocus: false
,adaptiveHeight: true
,prevArrow: $(".el-lista-slider-orcamento .setas .seta-anterior")
,nextArrow: $(".el-lista-slider-orcamento .setas .seta-proximo")
,responsive: [
{
breakpoint: 1280
,settings: {
slidesToShow: 2
}
},
{
breakpoint: 768
,settings: {
slidesToShow: 1
}
}
]
});
})
`
Is there a way to automatically duplicate the slides so I can reach the minimum of 5 (4+1) slides?
Thank you.
I've tried to set 'infinite' to 'true', expecting the slick-list to automatically duplicate the slides. I've seen some poeple complaining about this 'feature' (how they wish it didn't duplicate) but nothing happened.
Change slidesToShow: 4 in 3.99.
Learn more here.
Related
Even following different examples I can't apply the solution. Here are some sites I visited:
https://react-slick.neostack.com/docs/example/custom-paging
https://codesandbox.io/s/react-slick-forked-rxj5vp?file=/index.js:472-572
https://jsfiddle.net/tjwo23L8/
For me it is always presented in the frontend a wrong value that is not the total value of slides. Here is the code I am applying:
const heroSettings = { dots: true, infinite: true,fade: true,lazyLoad: true, speed: 800, autoplay: true, autoplaySpeed: 5000,slidesToShow: 1,slidesToScroll: 1, customPaging: i => (<button> {i + '/' + (i + currentSLide)}</button>),};
I get a value on the frontend similar to: 1/30 or 2/7. Since I have 7 slides in total in the loop.
This is a weird one.
I'm using datatables v1.10.19 with jQuery 3.3.1 and Bootstrap 3.3.7
My datatables grid is configured to display 1000 records (but you can change it to 2500, 5000 and "all").
I've only got about 60 records in my database.
It is using Server-Side processing to retrieve data.
When the grid loads, the pager displays 5 buttons plus an ellipses (as if there is even more).
And even weirder, if I change the drop-down to display "all" records, it acts as I would expect i.e. the pager has 1 page button.
The payloads are pretty much identical:
{
"data": {
"draw": 8,
"recordsTotal": 86,
"recordsFiltered": 66,
"data": [rows of data here]
},
"outcome": {
"opResult": "Success",
"message": ""
}
}
When you click on page 2, it does successfully retrieve a payload with 0 rows.
But there shouldn't be a page 2 available on the pager.
The config object for the datatable looks like this:
eventsSvr.buildConfig = function (url) {
return {
"processing": true,
"serverSide": true,
//"paging": true,
"ajax": {
url: url,
type: ajax.requestPOST,
dataSrc: 'data.data' // the path in the JSON structure to the array which will be the rows.
},
"order": [[1, "asc"]],
"lengthMenu": [[1000, 2500, 5000, -1], [1000, 2500, 5000, "All"]],
"initComplete": function (settings, json) {
eventsSvr.searchTextSpan.text('Search').removeClass('search-is-on');
},
"columns": eventsSvr.grid.columns,
"columnDefs": eventsSvr.grid.columnDefs,
dom: 'ltp'
};
I do have a bunch of custom searches on the page, so I've had to write a lot of code like this:
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var picker3 = $(eventsSvr.datePickerInputs[0]).data(icapp.kendoKey);
var picker4 = $(eventsSvr.datePickerInputs[1]).data(icapp.kendoKey);
var rowStartDate = moment(data[3], icapp.date.momentParseFormat).toDate();
var rowEndDate = moment(data[4], icapp.date.momentParseFormat).toDate();
... etc.
}
);
But the odd thing is the different behavior as between "All" records vs 1000 records.
As described above, select "All" records works (resulting in just 1 page button), but none of the other paging sizes work (i.e. 1000, 2500, 5000). The data for the 1 page does return, but I get 5 page buttons and an ellipses.
Any ideas why this would be happening?
When using server-side processing mode DataTables expects draw, recordsTotal and recordsFiltered to be root-level elements. Consider changing your repsonse to the following and you can remove dataSrc option.
{
"draw": 8,
"recordsTotal": 86,
"recordsFiltered": 66,
"data": [rows of data here],
"outcome": {
"opResult": "Success",
"message": ""
}
}
Alternatively you can manipulate the response before passing it to DataTables using function supplied as value for dataSrc option, but I would recommend keep things according to expected format for more readable code.
When I run the following code with varying amounts of data, only a subset of the rows are added.
In the following example, the createdRow callback is always called the same amount of times as elements in the array of rows (ie. 5 out of 5). However, the rowCallback callback is only called a subset of those times(ie. 3 out of 5). I'll pass 5 rows and 3 will be added or 13 rows and 8 will be added. I can't figure out a pattern to it.
I've upgraded dataTables to the most recent version (1.10.9). I've tried adding the rows one at a time in a loop.
Any ideas? Thanks!
sub_table = $('#data-table-check-off').DataTable({
"dom": 'ft',
"oLanguage": { "sSearch": "", "sSearchPlaceholder": "Search" },
"sScrollY": "250px",
"stateSave": true,
"lengthChange": false,
"paging": false,
"rowCallback": function(row, data, index) {
console.log("in rowCallback");
},
"createdRow": function(row, data, index) {
console.log("in createdRow");
}
});
var rows = [["12","Lorenzo"],["14", "Holly"],["15", "Chad"],["16", "Bear"],["17", "Zack"]];
sub_table.rows.add(rows).draw(false);
I'm using datatables version 1.9.4 and am having a problem with adding a class to certain rows.
I have multiple datatables, all with class 'display'. I'm using jQuery tabs to display each datatable on a separate tab.
All is working well, except I want to add a class to a table row depending on the column values; if column 6 is less than column 14, I want to add myClass.
I've found suggestions to use fnRowCallback, but I'm getting random results, such as sometimes if column 6 is less than column 14, myClass gets added correctly, but other times if column 14 is less than column 6 myClass still gets added!
This doesn't happen for all rows though, so it's pretty random.
Here's the code I'm using
$(document).ready(function() {
$('.display').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"bScrollCollapse": true,
"sScrollY": "300px",
"sAjaxSource": "ajax.php",
"sDom": '<"H"lfr>t<"F"ipS>',
"oScroller": {
"loadingIndicator": true
},
"fnRowCallback": function( nRow, aData ) {
var $nRow = $(nRow);
if (aData[6] < aData[14]) {
$nRow.addClass("myClass");
}
return nRow
}
});
});
Is there something wrong with what I've done, or is it because I'm using multiple tables?
I think I have this working, but there is probably a cleaner way, so if anyone knows of a better way of doing this, please let me know!
I'm looping through all the rows for each table once the table has been drawn.....
"fnDrawCallback": function( oSettings ) {
for (var i = 0, row; row = oSettings.nTable.rows[i]; i++) {
price = Number(row.cells[4].innerHTML.replace(/[^0-9\.]+/g,""));
average = Number(row.cells[6].innerHTML.replace(/[^0-9\.]+/g,""));
if (price < average) {
row.className = row.className + " myClass";
}
}
}
I have a enhancedgrid and used on two pages. When check box (component of data enhanced grid) is checked on page1, the equivalent row(s) on pg 2 are then ticked. My enhancedgrid code is
grid = new dojox.grid.EnhancedGrid({
loadingMessage:"Please wait",
store:newStore,
structure:layoutQL,
autoWidth:false,
autoHeight:true,
columnReordering:false,
rowsPerPage:3,
indirectSelection: true,
//noDataMessage:"No transactions have been processed for posting.",
//selectionMode:'single',
plugins: {
pagination: {
description: true,
sizeSwitch: false,
pageStepper: true,
gotoButton: true,
/*page step to be displayed*/
maxPageStep: 6,
/*position of the pagination bar*/
position: "bottom",
indirectSelection: true
},
filter : {
// Show the closeFilterbarButton at the filter bar
closeFilterbarButton: true,
// Set the maximum rule count to 5
ruleCount: 5,
// Set the name of the items
itemsName: "records"
}
}
I am using EnhancedDataGrid as in dojo framework. Any help will be appreciated.
Try "grid.selection.deselectAll()" when you move from one page to the next.