DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<body>
<label> Format : </label>
<select id="spr-format">
    <option value="sprn">Net Summary</option>    
    <option value="sprg">Gross Summary</option>    
    <option value="sprd">Details</option>   
</select> 
<button onclick="fnRet()">Retrieve</button>

<div class="container" id = "table-div">
    <table id='spr' class="display" width = "100%" cellspacing="0">
    </table>
</div>
</body>

JavaScript

$(window).load(function(){   
    fnRet();
});

function fnRet() {
    var source, sourceCols;
    switch($("#spr-format").val()) {
        case 'sprd':
            //source = "spr_details.php";
            source = [{
              "spr_date": "2015-09-01",
              "dsno": "123411",
              "custname": "JOHN ALVIN LO",
              "plateno": "CTJ228",
              "rono": "1010041707",
              "drno": "1010041707",
              "paymode": "po",
              "prno": "",
              "bj": "0.00",
              "cw": "0.00",
              "pms": "0.00",
              "gr": "0.00",
              "brp": "0.00",
              "war": "0.00",
              "grosslabor": "0.00",
              "labdisc": "0.00",
              "labor": "0.00",
              "grossparts": "90.00",
              "partsdisc": "0.00",
              "parts": "90.00",
              "revenue": "90.00",
              "partscost": "25.50",
              "netincome": "64.50",
              "status": "DONE",
              "unitdesc": "HYUNDAI STAREX",
              "custaddr": "MCARTHUR HIWAY SANTA CRUZ TARLAC CITY, TARLAC",
              "inscomp": null
            }, {
              "spr_date": "2015-09-01",
              "dsno": "123826",
              "custname": "SPS. MILA AND MARVIN JAVIER",
              "plateno": "AES475",
              "rono": "1010041700",
              "drno": "1010041700",
              "paymode": "po",
              "prno": "",
              "bj": "0.00",
              "cw": "0.00",
              "pms": "0.00",
              "gr": "450.00",
              "brp": "0.00",
              "war": "0.00",
              "grosslabor": "450.00",
              "labdisc": "67.50",
              "labor": "382.50",
              "grossparts": "1684.00",
              "partsdisc": "168.40",
              "parts": "1515.60",
              "revenue": "1898.10",
              "partscost": "1052.36",
              "netincome": "845.74",
              "status":...