JavaScript - UX - DataTable - V4

by rajeshpillai

HTML

<div id="debug"></div>
<div>
    <h2>DATATABLE DEMO </h2>
</div>
<table id = "foo">
    <thead>
        <tr>
            <th>Sr. No</th>
            <th>Skills</th>
            
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>C#</td>  
            
            
        </tr>  
        <tr>
            <td>2</td>
            <td>JavaScript</td>            
        </tr>
        <tr>
            <td>1</td>
            <td>C#</td>            
        </tr>  
        <tr>
            <td>2</td>
            <td>JavaScript</td>            
        </tr>  
        <tr>
            <td>1</td>
            <td>C#</td>            
        </tr>  
        <tr>
            <td>2</td>
            <td>JavaScript</td>            
        </tr>  
        <tr>
            <td>1</td>
            <td>C#</td>            
        </tr>  
        <tr>
            <td>2</td>
            <td>JavaScript</td>            
        </tr>  
        
    </tbody>   
</table>

CSS

table {
    border: 1px solid #d2d2d2;
}

th {
    border: 1px solid #ddd;
    
}
td {
    border: 1px solid #d5d5d5;
    padding:5px;
}

JavaScript

var debug;

$(function() { 
    UxTable("foo").dataTable({"width":"300", 
                              "height":"100",
                              "title":"JAVASCRIPT DATATABLE PLUGIN"});
});

function UxTable(ele) {
    this.defaults =  {
        width: "500",
        height: "350",
        title: "Title"
    };
    
    this.th = null;
    this.tb = null;
    
    if (this === window) {
        return new UxTable(ele);
    }

    var type = typeof ele;
    
    if (type === "string") {
        this.element = document.getElementById(ele);
    }
    else if (type === "object" &&
             ele.nodeType !== "undefined" &&
             ele.nodeType === 1) {
        this.element = ele;
    }
    else {
        throw new Error("Argument is of wrong type");
    }
    
    this.dataTable = function (options) {
        if (options !== "undefined" && options !== null) {
            this.defaults.width = options.width;
            this.defaults.height = options.height;
            this.defaults.title = options.title;
        }
        
        var parent = this.element.parentNode;
        
        // Get the head element.  getElmentsByTagName returns an array.
        var thead = this.element.getElementsByTagName("thead");
        
        // Grab the first head element (ideally a table should have only one head)
        var clone = thead[0];
    
        // Get the table tbody element
        var tbody = this.element.getElementsByTagName("tbody");
    
        // Create a grid/table container
        var gridContainer = document.createElement("div");
        gridContainer.setAttribute("class","gridContainer");
        parent.insertBefore(gridContainer, this.element);
       
        // Create a wrapper div element
        var gridHeader= document.createElement("div");
        
        // Set the class attribute
        gridHeader.setAttribute("class", "table-header");
    
        // Insert the div before the current element (table)
       ...