DataTables

DataTables Examples

by Behseini

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.js"></script>
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example"></table>
<button id="load">Load Data</button>

JavaScript

$(document).ready(function () {
    var counter = 0;
    var compareTable = [];
    var compareRow = [];
    var check = "Test";
    var compModelName = "Test";
    var selectedType = "Test";
    var selectedTarget = "Test";
    var selectedROR = "Test";
    var selectedSpecies = "Test";
    var historicDis = "Test";
    var projectsNumber = "Test";
    var projectsCost = "Test";
    var projectsRoads = "Test";
    var projectsPowerline = "Test";
    var projectsPenstock = "Test";
    var mapshow = "Test";



    $("#load").on("click", function () {
        loader();
    });

    function loader() {

        compareRow.push(check);
        compareRow.push(compModelName);
        compareRow.push(selectedType);
        compareRow.push(selectedTarget);
        compareRow.push(selectedROR);
        compareRow.push(selectedSpecies);
        compareRow.push(historicDis);
        compareRow.push(projectsNumber);
        compareRow.push(projectsCost);
        compareRow.push(projectsRoads);
        compareRow.push(projectsPowerline);
        compareRow.push(projectsPenstock);
        compareRow.push(mapshow);
    }



    $('#example').dataTable({
        "data": compareTable,
            "columns": [{
            "title": "Compare"
        }, {
            "title": "Model Name"
        }, {
            "title": "Model Type"
        }, {
            "title": "Energy Target"
        }, {
            "title": "ROR Attribute"
        }, {
            "title": "Species",
                "class": "center"
        }, {
            "title": "Disturbance",
                "class": "center"
        }, {
            "title": "Projects"
        }, {
            "title": "Cost (M$)"
        }, {
            "title": "Roads (Km)"
        }, {
            "title": "Powerlines (Km)",
                "class": "center"
        }, {
            "title": "Penstock (m)",
                "class": "center"
        }, {
            "title": "Map"
        }

        ]
    });
});