Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82804

Server-side Auto Refresh Table

$
0
0
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.

$(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

Viewing all articles
Browse latest Browse all 82804

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>