Hello!
First, thanks for this awesome tool! I am using it to create a server-side generated table of student workorders, assignments, and computer information. I built this originally in javascript but after I hit 10,000 entries my page started loading A LOT slower.
I am virtually brand new to HTML, PHP, Javascript, mySQL, and AJAX. That being said I have learned so much over the past few months while building this solution.
I have several tabs using JQUERY UI Tabs. 3 of which have datatables in them. I'm looking for a way to simply auto refresh the tables every 10 seconds or so.
I found this post: http://datatables.net/forums/discussion/75/is-it-posible-to-refresh-table/p1
But I couldn't discern a usable answer out of it.
Here is the work orders initialization. I am using some methods I found in the forums to make text field searching and dropdown searching. I also have these search fields restoring on refresh of the page.
Example code will help me the most as I am a visual learner when it comes to code.
Thanks for the help!
Bil
First, thanks for this awesome tool! I am using it to create a server-side generated table of student workorders, assignments, and computer information. I built this originally in javascript but after I hit 10,000 entries my page started loading A LOT slower.
I am virtually brand new to HTML, PHP, Javascript, mySQL, and AJAX. That being said I have learned so much over the past few months while building this solution.
I have several tabs using JQUERY UI Tabs. 3 of which have datatables in them. I'm looking for a way to simply auto refresh the tables every 10 seconds or so.
I found this post: http://datatables.net/forums/discussion/75/is-it-posible-to-refresh-table/p1
But I couldn't discern a usable answer out of it.
Here is the work orders initialization. I am using some methods I found in the forums to make text field searching and dropdown searching. I also have these search fields restoring on refresh of the page.
$(document).ready(function() { var asInitVals = new Array(); var isReloadedFromCookies; var oTable = $('#WO').dataTable({ "bJQueryUI": true, "bProcessing": true, "bServerSide": true, "aaSorting": [[ 3, "asc"]], "bStateSave": true, "sAjaxSource": "dt/scripts/WO_processing.php", "fnDrawCallback": function(oSettings) { if (isReloadedFromCookies == true) { isReloadedFromCookies = false; restoreFilters(oSettings); } return true; }, "fnStateLoadCallback": function(oSettings) { isReloadedFromCookies = true; return true; // if we don't return true here, the reload is cancelled. },"aoColumns": [ /* WOID */ null, /* Status */ null, /* Submitted */ null, /* Completed */ null, /* First Name */ null, //fnRender function gets passed oObj /* Last Name */ null, /* Laptop */ null, /* Problem */ null, /* Grad Yr */ null, /* School */ null], "fnServerData": function ( sSource, aoData, fnCallback ) { /* ... additional variables ... */ $.getJSON( sSource, aoData, function (json) { /* Create the select elements on the first run */ if ( json.sEcho == 1 ) { /*var fieldDisplayValue = array("WO #","First Name","Last Name","Laptop"); var fieldDisplayName = array("WO","firstname","lastname","laptop");*/ $("tfoot th").each( function (i) { /* Insert the select menu */ if ((i == 1) || /*(i == 2) || (i==3) ||*/ (i==7) || (i==8) || (i==9)){ this.innerHTML = fnCreateSelect(json.select[i], i); $('select', this).change( function () { oTable.fnFilter( $(this).val(), i ); } ); } /*else { this.innerHTML = fnCreateInput(fieldDisplayName[i],fieldDisplayValue[i]); }*/ } ); } /* DataTables callback */ fnCallback(json) } ); } }); // Since the text fields are generated in the HTML I kept the column ID's straight by giving each text field an ID related to that column. // This live funciton filters that column on key up. $("#WO tfoot input").live("keyup", function () { oTable.fnFilter( this.value, $(this).attr("name") ); //If it is a datepicker hide the date picker $(this).datepicker("hide"); } ); // Setup each input field with class Date to use a date picker $("#WO tfoot .Date").datepicker({ onSelect: function(dateText, inst){ oTable.fnFilter( this.value, $(this).attr("name") ); } //altFormat: 'm/o/yy'; }); // This is where the custom filters at the bottom are restored to their correct values after a reload. function restoreFilters(oSettings) { $('#WO tfoot input').each(function(index) { if (oSettings.aoPreSearchCols[$(this).attr("name")].sSearch.length > 0) { $(this).val(oSettings.aoPreSearchCols[$(this).attr("name")].sSearch); $(this).removeClass('search_init'); //$(this).attr("id") } }); //alert(oSettings.aoPreSearchCols[3].sSearch); $('#WO tfoot select').each(function(index) { if (oSettings.aoPreSearchCols[$(this).attr("id")].sSearch.length > 0) { $(this).find("option:contains('" + oSettings.aoPreSearchCols[$(this).attr("id")].sSearch + "')").prop("selected", "selected"); } }); } /* * Support functions to provide a little bit of 'user friendlyness' to the textboxes in * the footer */ $("#WO tfoot input").each( function (i) { asInitVals[i] = this.value; } ); $("#WO tfoot input").live("focus", function () { if ( this.className == "search_init" ) { this.className = ""; this.value = ""; } } ); $("#WO tfoot input").live("blur", function (i) { if ( this.value == "" ) { this.className = "search_init"; this.value = asInitVals[$("#WO tfoot input").index(this)]; } } ); } );
Example code will help me the most as I am a visual learner when it comes to code.
Thanks for the help!
Bil