Small Screen Data-table View

****************************Jquery***********************************
$(document).ready(function () {
        var headertext = [],
    headers = document.querySelectorAll("#customDataTable th"),
    tablerows = document.querySelectorAll("#customDataTable th"),
    tablebody = document.querySelector("#customDataTable tbody");

        for (var i = 0; i < headers.length; i++) {
            var current = headers[i];
            headertext.push(current.textContent.replace(/\r?\n|\r/, ""));
        }
        for (var i = 0, row; row = tablebody.rows[i]; i++) {
            for (var j = 0, col; col = row.cells[j]; j++) {
                col.setAttribute("data-th", headertext[j]);
            }
        }    
});

**********************CSS*******************************************

@media screen and (max-width: 640px) {
    table#customDataTable caption {
        background-image: none;
    }

    table#customDataTable thead {
        display: none;
    }

    table#customDataTable tbody td {
        display: block;
        padding: .6rem;
    }

    table#customDataTable tbody tr td:first-child {
        background: #666;
        color: #fff;
    }

        table#customDataTable tbody tr td:first-child a {
            color: #fff;
        }

        table#customDataTable tbody tr td:first-child:before {
            color: rgb(225,181,71);
        }

    table#customDataTable tbody td:before {
        content: attr(data-th);
        font-weight: bold;
        display: inline-block;
        width: 10rem;
    }

    table#customDataTable tr th:last-child, table#customDataTable tr td:last-child {
        max-width: 100% !important;
        min-width: 100px !important;
        width: 100% !important;
    }
}

Multipal Table 

function Call 

smallTable("Table ID Name");

function smallTable(id) {
            var headertext = [],
                headers = document.querySelectorAll("#" + id +" th"),
                tablerows = document.querySelectorAll("#" + id +" th"),
                tablebody = document.querySelector("#" + id +" tbody");

            for (var i = 0; i < headers.length; i++) {
                var current = headers[i];
                headertext.push(current.textContent.replace(/\r?\n|\r/, ""));
            }
            for (var i = 0, row; row = tablebody.rows[i]; i++) {
                for (var j = 0, col; col = row.cells[j]; j++) {
                    col.setAttribute("data-th", headertext[j]);
                }
            }
        }

Comments

Post a Comment

Popular posts from this blog

Bootstrap CSS Customize with SCSS CSS

Using Bootstrap with Bower First let's make a  package.json file for Node to see. Either use npm init -y or create a package.json file containing just an empty JSON object ( {} ). Now let's install gulp , gulp-bower , and gulp-sass : $ npm install --save-dev gulp gulp-bower gulp-sass Now let's use Bower to install bootstrap. This will allow us to import Bootstrap into our SCSS code and compile it down to CSS manually. Create a bower.json file using bower init or by manually creating one: Now let's install bootstrap-sass with Bower. $ bower install --save bootstrap-sass Create One file Now we can make an SCSS file that includes bootstrap into our project. Let's call our SCSS file css/app.scss : @ import "bootstrap" ; @ import "bootstrap/theme" ; Now let's use gulp to compile our app.scss , which includes Bootstrap SASS: Create On JS File with gulpfile.js var gulp = require ...
Read more

J Query listnav With Custom Scroll Bar

Add this Line // click handler for letters: shows/hides relevant LI's                $('a', $letters).bind(clickEventType, function (e) {                     $list = $('your selector');   //add this line                     $list = $list.find('.mCSB_container'); // add this line                     e.preventDefault();                     var $this = $(this),
Read more

Best way to prevent page scrolling on drag (mobile)

 window.onmousedown= function (e) {            if (isTouchDevice()) {                 $(document).on('touchstart', function (e) {                     e.preventDefault();                 });             } }  window.onmouseup = function (e) {     $(document).off('touchstart'); }
Read more