www.webdeveloper.com
Results 1 to 4 of 4

Thread: grabbing/replacing table data from database/file

  1. #1
    Join Date
    Jul 2012
    Posts
    19

    grabbing/replacing table data from database/file

    So, I'm a newbie to databases...

    I have a table, and I want to populate it with data on a button click. However, I have no idea what type of file would be best to save the data in.

    There will be several 'sets' of information to replace the table data, and several buttons to grab and place the corresponding info. Where would I save these 'sets' of data?

    Thank you, in advance!

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,031
    The first question I'll ask is, will this data be static? If it will be then you won't need an actual database or any files on the server and the data can be placed into objects.
    However, if the data will be changing then since it's tabular, a MySQL database would probably be best. But javascript cannot read or write directly to any MySQL database, thus you'll need PHP to serve as a bridge between the two. Javascript can send and receive data from a PHP script that reads/writes to your database.

  3. #3
    Join Date
    Jul 2012
    Posts
    19
    Awesome! Great information for a newbie. It will be static, but again, there will be a few tables used interchangeably, swapped by a triggered event. Would it be best then, to just include multiple tables in the html file?

    Thanks again.

  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,031
    Since the data is going to be static it would probably be easiest to simply load the data into javascript objects and avoid actual databases. However, a couple of things to consider would be filesize and page speed. I'm not sure how much data you have, though I think this principle should apply reguardless.

    You'll probably want to code these 'tables' of data into javascript objects. Then you'll want to include this javascript as an external script. You can have your page load this script asynchronously to avoid slowing down your page load times and prevent unnecessarily large filesizes.


    There are a lot of things that could be said and shared about javascript objects but for the sake of simplicity in your case I'll give you the most basic and relevant example I can think of:
    Code:
    var $table1 = [
    	{"Column 1": "Here's some data in the first column", "Column 2": "Here's some more data", "Column 3": 1234, "Column 4": "The data could be any number of data types, such as strings, numbers or boolean values."},
    	{"Column 1": "This will be on the second row", "Column 2": "foo", "Column 3": 5678, "Column 4": "foo"},
    	{"Column 1": "This will be on the third row", "Column 2": "foo", "Column 3": 9012, "Column 4": "foo"}
    ];
    This is effectively an array of objects. Each new index in the array would be a new row in a table. Following the object format you have a key and then a value (the key being your column name and the value being the data for that cell in the table). You could duplicate this any number of times to create multiple tables that could be loaded.

    Now, as for loading this bit of code into some HTML that would be some form of a table, below is just a basic example of a function that will take the above format and turn it into a table.
    Code:
    function _GenerateTable($a) {
    	var $cols = [];	
    	var $tableHTML = '<div style="display: table;">';
    	$tableHTML += '<div style="display: table-row;">';
    	for(var $b in $a[0]) $tableHTML += '<div style="display: table-cell;"><b>'+$b+'</b></div>';
    	$tableHTML += '</div>';
    	for(var $c = 0; $c < $a.length; $c++) {
    		$tableHTML += '<div style="display: table-row;">';
    		for(var $d in $a[$c]) $tableHTML += '<div style="display: table-cell;">'+$a[$c][$d]+'</div>';
    		$tableHTML += '</div>';
    	}
    	$tableHTML += '</div>';
    	
    	return $tableHTML;
    }
    
    document.getElementById("test").innerHTML = _GenerateTable($table1);
    The last line is just a simple way of generating a table with this function and placing it on the page somewhere. This code is a little sloppy, but it's mainly to show you how this can be done with objects. I wouldn't use this code for production but it can be used to get you started. Just make sure to refine the code and try to understand what it's actually doing.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles