Populating data table with dynamic data (Jquery datatable )

Hi Experts,

I'm trying to load a datatable with data that's being pulled from DB.(Struts project)

This is the example that I am trying to modify.

http://datatables.net/examples/api/tabs_and_scrolling.html

There would be 7 tabs and each tab will have around 60 rows.

What is the best way to accomplish this task?

What are the benefits if I use XSLT here?

thanks in advance
dkim18Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I would use a json source like their sample

 "sAjaxSource": '../examples_support/json_source.txt'

$(document).ready(function() {
	$("#tabs").tabs( {
		"show": function(event, ui) {
			var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
			if ( oTable.length > 0 ) {
				oTable.fnAdjustColumnSizing();
			}
		}
	} );
	
	$('table.display').dataTable( {
                 "sAjaxSource": '../examples_support/json_source.txt',
		"sScrollY": "200px",
		"bScrollCollapse": true,
		"bPaginate": false,
		"bJQueryUI": true,
		"aoColumnDefs": [
			{ "sWidth": "10%", "aTargets": [ -1 ] }
		]
	} );
} );

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dkim18Author Commented:
Thanks for your comment.
I am trying to test the above code.
I created examples_support folder under media dir and created json_source.txt with data in the following link, but it just says "no data available in table."


http://code.google.com/p/webworks-webme/source/browse/trunk/j/datatables/examples/examples_support/json_source.txt?r=788
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Do you see on your link where it reads, "view raw file".  Try that and you get https://webworks-webme.googlecode.com/svn-history/r788/trunk/j/datatables/examples/examples_support/json_source.txt

See if that link works better.
0
Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

dkim18Author Commented:
hm...this didn't help:

<script type="text/javascript" charset="utf-8">
		$(document).ready(function() {
			$("#tabs").tabs( {
				"show": function(event, ui) {
					var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
					if ( oTable.length > 0 ) {
						oTable.fnAdjustColumnSizing();
					}
				}
			} );
			
			$('table.display').dataTable( {
		                 "sAjaxSource": "http://webworks-webme.googlecode.com/svn-history/r788/trunk/j/datatables/examples/examples_support/json_source.txt",
				"sScrollY": "200px",
				"bScrollCollapse": true,
				"bPaginate": false,
				"bJQueryUI": true,
				"aoColumnDefs": [
					{ "sWidth": "10%", "aTargets": [ -1 ] }
				]
			} );
		} );
		</script>			
	

Open in new window

0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Ok, I see the issue now. I thought it was doing the tabs automatically.  Each tab needs a separate table.  

I don't know jsp, but since you are using a serverside language, use the example for tabs http://jsbin.com/OLeQUbo/2/edit or https://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html

I would do a separate ajax call to first bring in the table to a div via ajax, then run data tables.

$.getJSON('loadjson.php', function(data) {
      var table='<table>';
      /* loop over each object in the array to create rows*/
      $.each( data, function( index, item){
            /* add to html string started above*/
	 table+='<tr><td>'+item.team+'</td><td'>'+item.mvp+'</td></tr>';       
      });
      table+='</table>';
/* insert the html string*/
      $("#content").html( table );		
});

Open in new window

0
dkim18Author Commented:
Ok, thanks.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Java

From novice to tech pro — start learning today.