Increasing the numbers (Advanced)

Now let's see another way of dealing with our data table, based only on CSS and loading data via JSON file using the $.getJSON(); and $.ajax(); methods. Remember that you can use this code in your work, we have carefully optimized it as the JSON loading is very fast and the JSON file is very lightweight.

Getting ready

First it is necessary to run our small web server so that our request to JSON file works perfectly.

We'll be using Chrome throughout this recipe, although you may prefer to use a different browser—the Origin null message that you may see applies only to Chrome. Also you can use Firefox or Internet Explorer browser if you prefer, but the "Origin null is not allowed by Access-Control-Allow-Origin" message is only for Chrome browser.

How to do it...

1. Start the Mongoose Server and go to http://localhost:8080 on your browser.

2. Open the example file, Chapter05_Codes_1 or follow the next steps.

3. Insert a breakpoint in our stylesheet, to be more exact, in the head of the page.

4. Place the new CSS rules inside the Media Queries brackets.

5. Now, just below the existing style, we add the new code.

6. Let's now add in the relevant styles, as highlighted:

       table {
           max-width: 100%;
           background-color: transparent;
           border-collapse: collapse;
           border-spacing: 0;
           background-color: #fff
       }
       .table {
           width: 100%;
           margin-bottom: 20px;
       }
       .table th,
       .table td {
           padding: 8px;
           line-height: 20px;
           text-align: left;
           vertical-align: top;
           border-top: 1px solid #dddddd;
       }
       .table th {
           font-weight: bold;
       }
       .table thead th {
           vertical-align: bottom;
           color:#0006ff;
       }
       .table tbody tr:nth-child(odd) td,
       .table tbody tr:nth-child(odd) th {
           background-color: #f9f9f9;
       }
       .table tbody tr:hover td,
       .table tbody tr:hover th {
           background-color: whitesmoke;
       }
   
     @media only screen and (max-width: 768px) { }
   
     
   @media only screen and (max-width: 768px) { 
   
       .table { display: block; position: relative; width: 100%; }
       .table thead { display: block; float: left; background-color: #ccc; }
       .table tbody { 
         display: block; 
         width: auto; 
         position: relative; 
         overflow-x: auto; 
         white-space: nowrap;
         }
       .table thead tr { display: block; }
       .table th { display: block; }
       .table tbody tr { display: inline-block; vertical-align: top; }
       .table td { display: block; min-height: 1.25em; }
   
       table tbody tr { border-right: 1px solid #babcbf; }
   
     }

7. Note that we use only a max-width: 768px for this example and it works fine for this purpose.

8. At this moment our page must look like this on full-browser resolution:

   

   Screenshot at 1024px

9. When resized to 320px, we see the scroll bar just below the table:

   

   Screenshot at 320px

How it works...

Not bad, in our Media Queries we apply the display block property and the display inline-block property to our table <tbody> in the <tr> section.

Thus we force the table to show like a block and shift the <thead> tag to the left-hand side forcing the body to behave like a div and present it with a scroll bar.

Lets take a look at our JavaScript using the $.getJSON() jQuery function:

$.getJSON('table_content_2.json', function(data) {
          
              var table = $('#dynamicTable');
              
              var trthead = $('<tr/>');

              var head = $('<thead/>');
              
              trthead.appendTo(head);

            //Loop over the columns
                $.each(data.listColumns, function (index, value) {
                    var column = $('<th>' + value.Title + '</th>');
                    trthead.append(column);
                });

              var tbody = $('<tbody/>');
            
            //Loop over the rows;
              for (var i = 0; i < data.listRows.length; i++) {
                  var tr = $('<tr/>');
                      for (var t = 0; t < data.listRows[i].Value.length; t++) {

                        if(t == 0){
                          tr.append('<th>' + data.listRows[i].Value[t] + '</th>');
                        }else{
                          tr.append('<td>' + data.listRows[i].Value[t] + '</td>');  
                        }

                      }

                tbody.append(tr);
              }
                table.append(head);
                table.append(tbody);
        });

As stated earlier our JSON file is lightweight and very easy to be generated by any server-side language that you want to use.

But it is necessary to obey the naming conventions of columns and rows as shown in the following code snippet:

{
    "listColumns": [
        {
            "Title": "BANDS",
            "id": 1
        }
        
    ],
    "listRows": [
        {
            "Value": [
                "Studio Hours",
                "1.900 h"
                
            ]
        }
        
    ]
}

There's more

We will now cover some information about $.ajax() method:

Using the $. Ajax() method, we have even more flexibility to work with very large JSON files.

We can determine a loading to appear during our request (using the beforeSend function) and when the data is transferred we can remove it (using the complete function).

Additionally we have a function to handle any errors that prevent the loading of data from our table, code example, Chapter05_Codes_2.

$.ajax({
        type: 'GET',
        url: 'http://localhost:8080/table_content_2.json',
        timeout: 5000,
        dataType: "json",
        beforeSend: function () {
           var load = $('<div id="load"><p>Loading data...</p></div>');
           load.appendTo('body');
        },
        complete: function () {
          $('#load').remove();
        },
        success: function (data) {
          var table = $('#dynamicTable');
            var trthead = $('<tr/>');
            var head = $('<thead/>');
            trthead.appendTo(head);
            //Loop over the columns
                $.each(data.listColumns, function (index, value) {
            var column = $('<th>' + value.Title + '</th>');
           trthead.append(column);
                });
           var tbody = $('<tbody/>');
           //Loop over the rows;
           for (var i = 0; i < data.listRows.length; i++) {
                var tr = $('<tr/>');
           for (var t = 0; t < data.listRows[i].Value.length; t++) {
            if(t == 0){
            tr.append('<th>' + data.listRows[i].Value[t] + '</th>');
             }else{
             tr.append('<td>' + data.listRows[i].Value[t] + '</td>');}
            }
            tbody.append(tr);
            }
             table.append(head);
                table.append(tbody);
        },
        error: function (xhr, er) {
           $('body').html('<p>Sorry! Something wrong happened.')
            
        }
    });

Note

You can read more about Ajax requests using jQuery at http://api.jquery.com/jQuery.ajax.