← Back

Steps to Convert a DataTable to a Responsive DataTable

Note: A yellow highlighted background designates code that is added to the current implementation.

  1. Add datatable class to the table:


    <table cellpadding="0" cellspacing="0" border="0" class="display datatable" id="example">## datatable class added per x20171101
  2. After the closing table tag and subsequent closing div tags, add script and styles to the Format similar to this:


    
    ############################## start x20171101 
    <script> 
    $(document).ready(function(){ 
        $('.datatable td').each(function(){       $(this).html($(this).html().replace(']]&gt;','')); 
           $(this).html($(this).html().replace('<![CDATA[','')); 
           $(this).html($(this).html().replace(']]>','')); 
           $(this).html($(this).html().replace('<!--[CDATA[','')); 
           $(this).html($(this).html().replace('<p-->','')); 
           $(this).html($(this).html().replace(']]--&gt;','')); 
           $(this).html($(this).html().replace(']]--&gt;','')); 
        }); 
    }); 
    </script> 
     
    <script src="//www.jmu.edu/web_ssi/jquery/1.12/jquery-1.12.0.min.js" type="text/javascript"></script> 
    <!-- start DataTables plug-in --> 
    <link href="//www.jmu.edu/web_ssi/datatable/responsive/datatables.min.css" rel="stylesheet" type="text/css"/> 
    <script src="//www.jmu.edu/web_ssi/datatable/responsive/datatables.min.js" type="text/javascript"></script> 
    <!-- end DataTables plug-in --> 
    <style type="text/css"> 
        <!-- 
    .dataTables_filter { position: relative; left: -40px; } 
    --> 
    </style> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
        $('.datatable').DataTable( {  
            responsive: true, 
            "bAutoWidth": false /* toggle this depending on how wide you want the table */
        } ); 
    } ); 
    $( window ).resize(function() {  
      $('.datatable').removeAttr('style'); 
    });  
    </script> 
    <style type="text/css"> 
    <!-- 
    @media all and (min-width: 120px){ 
    .tabular-row, .tabular-cell { display: block; } 
    } 
    @media all and (min-width: 769px){ 
    .tabular-row{ display: table-row; } 
    .tabular-cell { display: table-cell; } 
    } 
    --> 
    </style> 
    <style>table.dataTable tbody th, table.dataTable tbody td{ vertical-align:top;}</style> 
         
    ############################## end x20171101 
    
  3. Remove old script calls and script and styles from the Format similar to this:

    (Hint: Look for the two @import lines often seen in our "old" DataTables)


    
    #* start removal per x20171101 
    <style type="text/css" title="currentStyle"> 
        @import "//www.jmu.edu/web_ssi/datatable/css/page.css";  
        @import "//www.jmu.edu/web_ssi/datatable/css/table.css"; 
    </style> 
    <script type="text/javascript" language="javascript" src="//www.jmu.edu/web_ssi/datatable/js/jquery.dataTablesall.js"></script> 
     
    <script type="text/javascript" charset="utf-8"> 
    /*<![CDATA[*/     
                (function($) { 
     
                $.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) { 
                    // check that we have a column id 
                    if ( typeof iColumn == "undefined" ) return new Array(); 
                     
                    // by default we only want unique data 
                    if ( typeof bUnique == "undefined" ) bUnique = true; 
                     
                    // by default we do want to only look at filtered data 
                    if ( typeof bFiltered == "undefined" ) bFiltered = true; 
                     
                    // by default we do not want to include empty values 
                    if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true; 
                     
                    var aiRows; 
                     
                    // use only filtered rows 
                    if (bFiltered == true) aiRows = oSettings.aiDisplay;  
                    // use all rows 
                    else aiRows = oSettings.aiDisplayMaster; // all row numbers 
                 
                    // set up data array     
                    var asResultData = new Array(); 
                     
                    for (var i=0,c=aiRows.length; i<c; i++) { 
                        iRow = aiRows[i]; 
                        var aData = this.fnGetData(iRow); 
                        var sValue = aData[iColumn]; 
                         
                        // ignore empty values? 
                        if (bIgnoreEmpty == true && sValue.length == 0) continue; 
                 
                        // ignore unique values? 
                        else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue; 
                         
                        // else push the value onto the result data array 
                        else asResultData.push(sValue); 
                    } 
                     
                    return asResultData; 
                }}(jQuery)); 
                 
                 
                function fnCreateSelect( aData ) 
                { 
                    var r='<select><option value=""></option>', i, iLen=aData.length; 
                    for ( i=0 ; i<iLen ; i++ ) 
                    { 
                        r += '<option value="'+aData[i]+'">'+aData[i]+'</option>'; 
                    } 
                    return r+'</select>'; 
                } 
                           
                 
                $(document).ready(function() { 
                    /* Initialise the DataTable */ 
                    var oTable = $('#example').dataTable( { 
                        "aaSorting": [ [0,'asc'] ], 
                        "oLanguage": {"sSearch": "Search:"}, 
    ##  "aoColumns": [ 
    ##            null, 
    ##            { "asSorting": [ "desc", "asc" ] }, 
    ##            null             
    ##        ], 
                        "aoColumnDefs": [  
              { "asSorting": [ "desc", "asc" ], "aTargets": [ 0 ] }, 
              { "asSorting": [ "desc", "asc" ], "aTargets": [ 1 ] }, 
              { "asSorting": [ "desc", "asc" ], "aTargets": [ 2 ] }, 
              { "asSorting": [ "desc", "asc" ], "aTargets": [ 3 ] }, 
              { "asSorting": [ "desc", "asc" ], "aTargets": [ 4 ] }, 
              { "asSorting": [ "desc", "asc" ], "aTargets": [ 5 ] } 
          ] 
                    } ); 
     
     
     
    ##                $(".dropdown td").eq(0).css('display','none'); 
     
                    ## ADD SEARCH BOX 
                    $(".dropdown td").eq(0).html('<input type="text" name="search0" id="search0" size="60" />');            
                    $("#search0").keyup( function () { 
                        oTable.fnFilter( this.value, 0, null, false, null, null ); 
                    } ); 
                                 
                    ## ADD SEARCH BOX 
                    $(".dropdown td").eq(1).html('<input type="text" name="search1" id="search1"> />');            
                    $("#search1").keyup( function () { 
                        oTable.fnFilter( this.value, 1, null, false, null, null ); 
                    } ); 
                     
                    /* Add a select menu for each TH element in the table footer */ 
                    $(".dropdown td").eq(2).each( function ( i ) { 
                        this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(2).sort() ); 
                        $('select', this).change( function () { 
                            oTable.fnFilter( $(this).val(), 2 ); 
                        } ); 
                    } );                     
                     
                    /* Add a select menu for each TH element in the table footer */ 
                    $(".dropdown td").eq(3).each( function ( i ) { 
                        this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(3).sort() ); 
                        $('select', this).change( function () { 
                            oTable.fnFilter( $(this).val(), 3 ); 
                        } ); 
                    } );                                    
     
                    /* Add a select menu for each TH element in the table footer */ 
                    $(".dropdown td").eq(4).each( function ( i ) { 
                        this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(4).sort() ); 
                        $('select', this).change( function () { 
                            oTable.fnFilter( $(this).val(), 4 ); 
                        } ); 
                    } );                                    
     
                     
                    ## GEN ED DROPDOWN 
    ##                $(".dropdown td select").eq(3).html('<option value=""></option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option>');             
                     
     
                    ## ADD SEARCH BOX 
                    $(".dropdown td").eq(5).html('<input type="text" name="search2" id="search2" />');            
                    $("#search2").keyup( function () { 
                        oTable.fnFilter( this.value, 5, null, false, null, null ); 
                    } ); 
     
                     
                    ## HIDE GLOBAL SEARCH BOX 
                    $("#example_filter").css('display', 'none'); 
         
     
                    ## RESIZE FIRST DROPDOWN 
    ##                $(".dropdown td select").eq(0).css('width','100%'); 
     
                    ## RESIZE FIRST DROPDOWN 
    ##                $("thead tr th").eq(2).css('width','260px'); 
     
                     
                } ); 
                             
    /* ]]>*/             
    </script> 
    
    end removal per x20171101*#
    
  4. If you want drop-down select menus for particular columns, visit Jamie Johnson's article at http://tech.beacondeacon.com/datatable-with-dropdowns.html, which explains how to implement them on a responsive DataTable.

← Back

Back to Top