Develop Reference

JSGrid - Change cell value after page is changed (onPageChanged method) not working

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.

DataTables menu for select items to show per page doesn't work

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

Modifying TableTools With Datatables

I'm trying to find out how I can add a button to right before the copy button that will always be a link to the create page of the resource. So if its on /users and in the list of buttons if a user clicks Add then it goes to /users/create. How would I do that with my code below. I also have a couple of errors and researched it and found out my errors might be due to the order in which my files are rendered. I have included the order below. I'm hoping someone can help me out somehow.
TypeError: jQuery[g3g][((((Y2 + Z3) + G4) + p1) + F9e)] is undefined
...((Y2+G4+d6g+Z3+G4+A1e+U2+y8g))):jQuery&&!jQuery[g3g][(Y2+Z3+G4+p1+F9e)][(y8+t5e+...
dataTab...itor.js (line 475, col 170)
TypeError: DataTable.Editor is undefined
DataTable.Editor.defaults.display = "bootstrap";
editor....trap.js (line 8)
$('document').ready(function() {
$('#myDatatable').dataTable({
"pagingType": "full_numbers",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [-1] },
{ 'sWidth': '30px', 'aTargets': ['idTH'] },
{ 'sWidth': '150px', 'aTargets': ['actionsTH', 'subTH'] },
{ 'sClass': 'text-center', 'aTargets': ['idTH', 'actionsTH', 'subTH'] }
],
"iDisplayLength": 10,
"aLengthMenu": [
[5, 10, 25, 50, -1],
[5, 10, 25, 50, "All"]
],
dom: '<"dt-panelmenu clearfix"Tfr>t<"dt-panelfooter clearfix"ip>',
"oTableTools": {
"sSwfPath": "vendor/plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf"
}
});
});
<script src="http://myapp.app/vendor/jquery/jquery-1.11.1.min.js">
<script src="http://myapp.app/vendor/jquery/jquery_ui/jquery-ui.min.js">
<script src="http://myapp.app/assets/js/bootstrap/bootstrap.min.js">
<script src="http://myapp.app/assets/js/utility/utility.js">
<script src="http://myapp.app/assets/js/main.js">
<script type="text/javascript">
<script src="http://myapp.app/vendor/plugins/datatables/media/js/jquery.dataTables.js">
<script src="http://myapp.app/vendor/plugins/datatables/media/js/dataTables.bootstrap.js">
<script src="http://myapp.app/vendor/plugins/datatables/extensions/TableTools/js/dataTables.tableTools.min.js">
<script src="http://myapp.app/vendor/plugins/datatables/extensions/Editor/js/dataTables.editor.js">
<script src="http://myapp.app/vendor/plugins/datatables/media/js/dataTables.bootstrap.js">
<script src="http://myapp.app/vendor/plugins/datatables/extensions/Editor/js/editor.bootstrap.js">
<script src="http://myapp.app/assets/js/my-datatables.js">

Well one, in your <script> tags section, you open a tag but never close it. That is likely your odd error you're not defining. Not so much as the placements of the scripts or the order they are in.
As for adding a button to your UI, sometimes the way datatables explains it, it won't always work in your favor, more so as those buttons are flash based.
I'd say for the sake of example:
after your call to $('#myDatatable').dataTable({});
Simply append the element via standard jquery methods..
ie:
$('#myDatatable').append('<div style="width:100px;height:30px;background-color:#F60;color:#fff;position:absolute;top:2px;right:275px;">Hello</div>');
Again primarily for the sake of example, you can tweak as needed but you can basically get this right up snug next to those buttons should you like you could likely get it in the button container, but then your going to mess with extra styling, positioning, etc.. easiest to go next to all around if your getting a feel for things overall.

jquery DataTables infinite scroller - call a function when scroller reaches the bottom

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);
}
});
}
});

jQuery Datatables pagination setting

I'm trying to work with the pagination of the jquery datatables. I load the data with ajax. My response is now:
aaData: [[:anonymous:, null, 2012-07-29 08:28:21, 0, 85 million, null],…]
iTotalDisplayRecords: 70
iTotalRecords: 70
sEcho: 1
All of my records (70) are shown, how can I make them paginate and have for ex 10 records per page?
I tried settings iTotalDisplayRecords to 10 but it shows the same result.
My datatable init:
myDataTable = $('#datatablesresults').dataTable({
bProcessing : true,
sProcessing : true,
bServerSide : true,
sAjaxSource : '/results/load-results?' + getParams,
aoColumnDefs : [{'bSortable' : false, 'aTargets' : ['no-sort']}], // make the actions column unsortable
sPaginationType : 'full_numbers',
fnDrawCallback : function(oSettings) {
_initTable();
}
});

try this:
$("#myDataTable").dataTables({
"bJQueryUI":true,
"bSort":false,
"bPaginate":true,
"sPaginationType":"full_numbers",
"iDisplayLength": 10
});

$('#example').dataTable( {
"pagingType": "full_numbers"
} );
DataTables has six built-in paging button arrangements:
numbers - Page number buttons only (1.10.8)
simple - 'Previous' and 'Next' buttons only
simple_numbers - 'Previous' and 'Next' buttons, plus page numbers
full - 'First', 'Previous', 'Next' and 'Last' buttons
full_numbers - 'First', 'Previous', 'Next' and 'Last' buttons, plus page numbers
first_last_numbers - 'First' and 'Last' buttons, plus page numbers

For anyone looking simply how to change number of pages displayed in pagination here is code snippet.
jQuery.fn.dataTableExt.pager.numbers_length = 10;
$(document).ready(function() {
// Basic datatable
$('#datatable').DataTable();
.... rest of the code below....
You can change number of pages displayed in pagination changing the value '10' in first line.