Translate

Monday, July 23, 2012

Internews - Study Examines Potential of Digital Society in Indonesia

With more than 43 million Facebook accounts and 19 million active Twitter users, Indonesia boasts the second highest number of social media users in Asia. Despite the wave of new technology, these figures mask a stronger undercurrent of digital and social inequality. Indonesia: New Digital Nation?, a new report from the Internews Center for Innovation & Learning, explores the potential and limitations of social media and new ICTs to support local community development and advocacy in Indonesia. Read more.

Wednesday, July 18, 2012

jQuery - DataTables, Buttons, CSV

Another example of adding buttons in jQuery DataTables and outputing to CSV. This puts a button in the wrapper div.


$(document).ready(function() {
   $('#example').dataTable();
   $('<div />').css({'float' : 'left'}).css({'padding-right' : '20px'}).attr({'id' : 'fButtons'}).prependTo($('#example_wrapper'));
   $('<button />').attr({
      'id' : 'tabletocsv'
   })
   .html('CSV')
   .appendTo($('#fButtons'));

   $('#tabletocsv').click( function () {
    rgDataTable2CSV(0);
   });     
     
function rgDataTable2CSV(mOffset) {
  
    function row2CSV(tmpRow) {
        var tmp = tmpRow.join(''); // to remove any blank rows
        if (tmpRow.length > 0 && tmp !== '') {
            var mystr = tmpRow.join(',');
            csvData[csvData.length] = mystr;
        }
    }       
    function formatData(input) {
        // replace " with “
        var regexp = new RegExp(/["]/g);
        var output = input.replace(regexp, "“");
        //HTML
        regexp = new RegExp(/\<[^\<]+\>/g);
        output = output.replace(regexp, "");
        if (output === "") return '';
        return '"' + output + '"';
    }       
    function popup(data) {
        var generator = window.open('', 'csv', 'height=400,width=600,menubar=1,resizable=1');
        generator.document.write('<html><head><title>CSV</title>');
        generator.document.write('</head><body >');
        generator.document.write('<textArea cols=70 rows=15 wrap="off" >');
        generator.document.write(data);
        generator.document.write('</textArea>');
        generator.document.write('</body></html>');
        generator.document.close();
        generator.focus();
    }
    var csvData = [];
    var tmpRow = [];

   //get the header
   var el = $('#example').find('thead');
   (el).find('tr').each (function() {   
   tmpRow = [];   
   $(this).find('th').each(function(index, domEle) { 
   tmpRow[tmpRow.length] = formatData($.trim($(this).html()));
    });
   row2CSV(tmpRow);   });

    //get the data
   $('#example').find('tr').each (function() {   
   tmpRow = [];   
   $(this).find('td').each(function(index, domEle) {   
   tmpRow[tmpRow.length] = formatData($.trim($(this).html()));
   });
   row2CSV(tmpRow);   });
 
    var mydata = csvData.join('\n');
    return popup(mydata);

}  
     
});

You can test it out here.

Tuesday, July 17, 2012

jQuery - Add Buttons to DataTables

A simple example of adding buttons to jQuery DataTables before the search filter.


$(document).ready(function() {
   $('#example').dataTable();
     
   $('<div />').addClass('UnSelectAllButton').css({'float' : 'left'}).attr({'id' : 'UnSelectAllButtons'}).prependTo($('#example_filter'));
     
   $('<button />').attr({
      'id' : 'deSelectAll'
   })
   .html('Deselect All')
   .appendTo($('#UnSelectAllButtons'));

   $('<button />').attr({
      'id' : 'selectAll'
   })
   .html('Select All')
   .appendTo($('#UnSelectAllButtons'));

   $('#deSelectAll').click( function () {
    alert( 'Deselect all.');
   });     
     
   $('#selectAll').click( function () {
    alert( 'Select all.');
  });
     
});

You can test it out here.

Monday, July 16, 2012

jQuery - Output DataTables as CSV

I switched to using jQuery DataTables in my project and need a way to output the table data as CSV. Here is the JavaScript that I came up with:


function rgDataTable2CSV(mTable, mOffset) {
   var csvData = [];
   var tmpRow = [];
   var cL = 0;
   //get the header
   $('#lstTabHead'+ mTable + ' th').each (function(index, domEle) {
       if ($(this).closest('.dataTables_scrollHeadInner').length > 0){
          tmpRow[tmpRow.length] = formatData($.trim($(this).html()));
       };
   });
    row2CSV(tmpRow);
    //get the data
   $('#lstTab' + mTable).find('tr').each (function() {
      tmpRow = [];
      $(this).find('td').each(function(index, domEle) {
          tmpRow[tmpRow.length] = formatData($.trim($(this).html()));
        });
       row2CSV(tmpRow);
   });
    tmpRow = [];
    //this gets the left side (the fixed column)
   $('#lstTabFoot' + mTable).find('tr').each (function() {
      $(this).find('td').each(function(index, domEle) {
          tmpRow[tmpRow.length] = formatData($.trim($(this).html()));
        });
   });
   cl = 0;
   //this gets the right side
   $('#lstTabFoot'+ mTable + ' td').filter(':visible').each (function(index, domEle) {
       if ($(this).closest('.dataTables_scrollFootInner').length > 0){
          cL = cL + 1
          if(cL > mOffset){
          tmpRow[tmpRow.length] = formatData($.trim($(this).html()));
          };
       };
   });
   row2CSV(tmpRow);    
    var mydata = csvData.join('\n');
    return popup(mydata);
          
    function row2CSV(tmpRow) {
        var tmp = tmpRow.join('') // to remove any blank rows
        if (tmpRow.length > 0 && tmp != '') {
            var mystr = tmpRow.join(',');
            csvData[csvData.length] = mystr;
        }
    }
       
    function formatData(input) {
        // replace " with “
        var regexp = new RegExp(/["]/g);
        var output = input.replace(regexp, "“");
        //HTML
        var regexp = new RegExp(/\<[^\<]+\>/g);
        var output = output.replace(regexp, "");
        if (output == "") return '';
        return '"' + output + '"';
    }
       
    function popup(data) {
        var generator = window.open('', 'csv', 'height=400,width=600,menubar=1,resizable=1');
        generator.document.write('<html><head><title>CSV</title>');
        generator.document.write('</head><body >');
        generator.document.write('<textArea cols=70 rows=15 wrap="off" >');
        generator.document.write(data);
        generator.document.write('</textArea>');
        generator.document.write('</body></html>');
        generator.document.close();
        generator.focus();
    }
       
}


This script is based off of the Table2CSV script. The HTML table structure for the of the DataTables in my application have a thead id = lstTabHead + tablename, tbody id = lstTab + tablename, tfoot id = lstTabFoot + tablename. This naming convention is required by this script. Call the script using "rgDataTable2CSV(tablename, 1)". The second parameter is an offset that is used for the first column being omitted.

Friday, July 13, 2012

Windows 7 - Would Not Start

Restarted my laptop yesterday morning and it could not start Windows. Here's how I fixed it.

I tried booting into safe mode but it got stuck at loading "Classpnp.sys".

I put my Windows 7 DVD in the drive and booted from the DVD. After it installed it's files and I got to the install screen I selected repair in the lower left corner. It ran saying it was searching for installs even though it listed my install. I finally had to power it off after two hours because it wasn't getting anywhere.

It was clear I wasn't going to get anywhere on my laptop so I took the hard drive out and attached it externally to another computer. The drive showed up OK so I ran "CHKDSK" on it. When "CHKDSK" finished I put the drive back into my laptop.

Back on my laptop I booted from the DVD and ran repair. This time it was able to find my install! It took about a half hour to run but eventually the repair finished.

I booted into Windows and I was able to log in. The start-up was really slow and not getting anywhere fast so I powered off the laptop and started Windows in safe mode.

The laptop booted into safe mode just fine. I opened a command prompt as administrator and ran "sfc /scannow". It finished and the message said that there were some files it was not able to repair.

I restarted the laptop and booted into Windows. This time it started up just fine! I checked the hard drive and noticed I had almost double the free space that I had when I last looked at it a couple of days ago. Obviously there are some files were corrupted. So far everything is working OK but I do realize that this hard drive cannot be trusted and I need to get a new hard drive.

Wednesday, July 11, 2012

jQuery - DataTables Plug-in

Received a request to have the tables sortable in the the web application that I'm working on. I looked around a bit to see what was available and decided to give DataTables a try. The first column in my table is fixed and contains links to actions (view and edit) so I'm using the FixedColumns plugin to hold the column in place while the remainder of the table is scrollable both horizontally and vertically.

So far it's been working very nicely but there were a couple of issues. The FixedColumns plugin wasn't setting the column width correctly for an empty table. That was fixed by setting the "iLeftWidth" property. I also needed to set it so that the first column could not sortable on. I found that the simplest way to do that was to use the "aoColumnDefs" property.

Here is my initialization script:

$(document).ready( function () {
 var oTable = $('#tableID').dataTable( {
 "aaSorting": [ [1, "asc"] ],
 "sScrollY": "600px",
 "sScrollX": "100%",
 "bScrollCollapse": true,
 "bStateSave": true,
 "bPaginate": false,
//make first column not sortable
 "aoColumnDefs": [{"bSortable": false, "aTargets": [0]}] 
 });
 new FixedColumns( oTable, {
   "iLeftWidth": "100"
 });
});

So far I'm very impressed by what this jQuery plug-in can do. I have noticed that the page load times have increase. Waiting to see if this will be an issue for the end users.

Monday, July 9, 2012

jQuery - Convert HTML Table to Excel

One of my users needs to be able to save table data as an Excel file in the web app that I'm working on and the web app is just weeks from being released. Luckily it's easy to do this using the jQuery table2CSV plugin. It seems there are a few of these floating around the Internet. I got mine from the jQuery tableToCSV plugin site. Works like a charm. The only thing I need to fix was:

Change this:
if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
To this:
if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($.trim($(this).html()));