I was trying to use jquery data tables with infinite scrolling to display the data in my server.
I have a large collection of data in server, which is not fixed (number of records increase everyday, so there is no fixed number on how much data is present). I am trying to show it in twitter style pagination instead of normal pagenumbered google style pagination. My code looks like below. With this code I am able to load initial data. But I could not find any resource on how a second call can be triggered when the scroller reaches the end of current table and append new result to same table. Is there any function that dataTables provide to detecct the scroll end. Or do we have to write a scroll event and detect whether the scroller has reached the end of the table?
var table = $("#events-table").dataTable({
"bProcessing": true,
"bServerSide": true,
"sScrollY": 100,
"aoColumns": [
{ "sTitle": "col1" },
{ "sTitle": "col2" }
]
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
url : “http://linkToAccessServer” + pagenumber,
type : 'post',
success : function(data){
var tableData = {};
tableData.iTotalRecords = data.totaldata;
tableData.aaData = [];
for(var i = 0; i < data.data.length; i++){
var tableInnerArray = [];
tableInnerArray.push(data.data.col1);
tableInnerArray.push(data.data.col2);
tableData.aaData.push(tableInnerArray);
}
fnCallback(tableData);
}
});
}
});
Related
I'm using JS-Grid and I want to update a specific cell value right after i change a page.
Looking at the documentation , onPageChanged method seems like the right way to do it, but it doesn't work properly.
I have the following JS-Grid code:
$("#itemsListGrid").jsGrid({
width: "100%",
filtering: true,
sorting: !0,
viewsortcols : [true,'vertical',true],
paging: true,
autoload: true,
pageSize: 9,
pageButtonCount: 5,
controller: db,
fields: jsGrid_fields_mapping,
onPageChanged: function() {
alert("START onPageChanged");
var archiveRNTable = document.getElementsByClassName("jsgrid-table")[1];
archiveRNTable.rows[0].cells[2].innerText="valueIsChanged"
alert("END onPageChanged");
}
});
Running my app, i see that the alerts are popping BEFORE the page actually change. I'm trying to find a workaround to make it work.
Maybe not the most clean way to do it, but have you tried using setTimeout()?
So, in your case:
onPageChanged: function(args) {
alert("START onPageChanged");
// Wait some time to render table, then call function
setTimeout(function() {
var archiveRNTable = document.getElementsByClassName("jsgrid-table")[1];
archiveRNTable.rows[0].cells[2].innerText="valueIsChanged"
alert("END onPageChanged");
}, 300);
},
Background: the docs of JSGrid say that the event fires immediately after the page index is changed and doesn't wait for the data to load.
I need to create a Trello-like frame with 4 lists and cards on which I want to drag and drop cards between those lists, however, I would like to know how can I update the database in Mysql when I drag and drop the elements?
I'm not able to identify how to update ajax and php.
script.js
var itemContainers = [].slice.call(document.querySelectorAll('.board-column-content'));
var columnGrids = [];
var boardGrid;
// Define the column grids so we can drag those
// items around.
itemContainers.forEach(function (container) {
// Instantiate column grid.
var grid = new Muuri(container, {
items: '.board-item',
layoutDuration: 400,
layoutEasing: 'ease',
dragEnabled: true,
dragSort: function () {
return columnGrids;
},
dragSortInterval: 0,
dragContainer: document.body,
dragReleaseDuration: 400,
dragReleaseEasing: 'ease'
})
.on('dragStart', function (item) {
// Let's set fixed widht/height to the dragged item
// so that it does not stretch unwillingly when
// it's appended to the document body for the
// duration of the drag.
item.getElement().style.width = item.getWidth() + 'px';
item.getElement().style.height = item.getHeight() + 'px';
})
.on('dragReleaseEnd', function (item) {
// Let's remove the fixed width/height from the
// dragged item now that it is back in a grid
// column and can freely adjust to it's
// surroundings.
item.getElement().style.width = '';
item.getElement().style.height = '';
// Just in case, let's refresh the dimensions of all items
// in case dragging the item caused some other items to
// be different size.
columnGrids.forEach(function (grid) {
grid.refreshItems();
});
})
.on('layoutStart', function () {
// Let's keep the board grid up to date with the
// dimensions changes of column grids.
boardGrid.refreshItems().layout();
});
// Add the column grid reference to the column grids
// array, so we can access it later on.
columnGrids.push(grid);
});
// Instantiate the board grid so we can drag those
// columns around.
boardGrid = new Muuri('.board', {
layoutDuration: 400,
layoutEasing: 'ease',
dragEnabled: true,
dragSortInterval: 0,
dragStartPredicate: {
handle: '.board-column-header'
},
dragReleaseDuration: 400,
dragReleaseEasing: 'ease'
});
I would like to suggest you to use this jKanban boards
In this you can find all events very easily and let me know if you face any issue in this
https://www.riccardotartaglia.it/jkanban/
On my DataTable the box where you can select how many items per page you want to show doesn't work. It is showing me this:
[[5,10],[5,10]] instead to show me only the numbers.
I tried to understand what caused this issue but without any success.
If I click on the menu one of the options I have this error also: Showing NaN to NaN of 2 entries
I'm using this in my Rails 4 app.
this is my js:
var dtMainDataTable; // Reference to main table
var dtSecondaryDataTable; // Reference to secondary table
var dtTertiaryDataTable; // Reference to tertiary table
var dtMainOrder; // Main table ordering
/*
* Create tables on document ready
*/
$(document).ready( function() {
// Set the order of the main table and update if overridden by page.
dtMainOrder = [0, 'asc'];
if (typeof dtMainOrderUpdate !== 'undefined') {
dtMainOrder = dtMainOrderUpdate;
}
dtMainDataTable = $('#main').DataTable({
columnDefs: [],
"pageLength": pageLength,
"lengthMenu": pageSettings,
"order": dtMainOrder,
responsive: true
});
dtSecondaryDataTable = $('#secondary').DataTable({
columnDefs: [],
"pageLength": pageLength,
"lengthMenu": pageSettings,
responsive: true
});
dtTertiaryDataTable = $('#tertiary').DataTable({
columnDefs: [],
"pageLength": pageLength,
"lengthMenu": pageSettings,
responsive: true
});
});
/**
* Show all items in the main table.
* Really only for testing purposes.
*
* #return [Null]
*/
function dtMainTableAll() {
dtMainDataTable.page.len(-1).draw();
}
I resolved my own question and hope will be useful for others.
I had this in my code: var pageLength = '#{current_user.table_rows}';
I dleeted the '' and started working again
So the result working for me is:
var pageLength = #{current_user.table_rows};
My goal is to call an API, which returns JSON data. On successfully retrieving the data, I would like to put the retrieved image into a gallery, organized with the Masonry library. This should work for initially loading data, and endless scrolling to load more data when the user scrolls down the page.
The code below works well for grabbing and organizing the first set of data. It loads nine images and uses Masonry to organize them. But, when I scroll down the page to load more images, all of the current images get pushed down the page. When I scroll down again the same thing happens. So I end up with a bunch of white space at the top of the page.
I was attempting to roughly follow the example that I found here;
http://codepen.io/desandro/pen/iHevA
Thanks for any help you can provide.
function loadThumbnailImages(thumbDate) {
// Format the date into YYYY-mm-dd format for the API
formattedDate = this.formatDate(thumbDate);
$.jsonp({
// The URL to parse the JSON from
url: 'dataURLGoesHere' + formattedDate, // any JSON endpoint
// if URL above supports CORS (optional)
corsSupport: false,
// if URL above supports JSONP (optional)
jsonpSupport: false,
// If the JSON from the URL was successfully parsed
success: function(data){
$(document).ready(function() {
if(data.media_type == "image")
{
var item = '<div class="masonry-item"><img src=' + data.url + ' class="thumbImage img-responsive"/></div>';
items += item;
if(doneLoading)
{
var $container = $('#masonry-list').masonry({
itemSelector: '.masonry-item',
columnWidth: 50
})
$container.append(items);
$container.imagesLoaded().progress( function ( imgLoad, image) {
var $item = $(image.img).parents('.masonry-item');
$container.masonry('appended', $item);
});
items = "";
}
}
})
}
I managed to figure it out. Adding the two lines $container.masonry('reloadItems') and $container.masonry('layout') manages to load the images and responsively place them in the correct place. Hopefully this can help someone in the future!
var $container = $('#masonry-list').masonry({
itemSelector: '.masonry-item',
columnWidth: 50
})
$container.append(items);
$container.imagesLoaded().progress( function ( imgLoad, image) {
var $item = $(image.img).parents('.masonry-item');
$container.masonry('appended', $item);
$container.masonry('reloadItems'); //<--- This line and
$container.masonry('layout'); //<-------- This line fixed the problem
});
I am new and still learning so if you notice anything basic that I should know, please call it out.
Firstly, this is what I have:
$(function () {
$.ajax({
url: "",
dataType: 'jsonp',
success: function (results) {
var photosArray = new Array();
var allPix = results.data._included.media;
for (var i = 0; i < allPix.length; i++) {
var mediaNumber = allPix[i];
var photosHtml = "<div>";
photosHtml += "<img src='{0}'/>".replace("{0}", mediaNumber.photos.largest);
photosHtml += "</div>";
photosArray.push(mediaNumber.photos.rectangle);
$(".images").append(photosHtml);
}
}
});
});
In the above code, I am accessing an API call to get images.
Secondly, I want to use the image url's I get from that call to create this slideshow:
http://jsfiddle.net/SxN8g/17/
The problem is that in that slide show everything is in an array and that's how images are being shown. How can I use the above solution in my function to create this slideshow for my images?
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [978, 308], //width/height of gallery in pixels. Should reflect dimensions
of largest image
imagearray: [
["images/1.jpg", "#", "", "","test1"],
["images/2.jpg", "#", "", "","test2"],
["images/3.jpg", "#", "", "","test3"],
["images/4.jpg", "#", "", "","test4"]
],
displaymode: {type:'auto', pause:3000, cycles:10, wraparound:true, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler"
});
as you can see this runs off of an array that you could manipulate. hope this helps.