for listahan

by xawixawxaw

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<div class="data-table searchWSP home">
    <table id="tblData" class="fixed noAltRowColor borderBottom hover">
        <thead>
            <tr>
                <th style="width: 80px !important">WSP ID</th>
                <th class="size1" style="width: 250px;">Name of WSP</th>
                <th>Level of Service</th>
                <th>Management Type</th>
                <th class="size1" style="width: 250px;">Contact Person</th>
                <th class="no sort">Telephone No.</th>
                <th class="no sort">Fax No.</th>
                <th class="size1" style="width: 250px;">Office Region</th>
                <th class="size1" style="width: 250px;">Office Province</th>
                <th class="size1" style="width: 250px;">Office Municipality</th>
                <th class="size1" style="width: 250px;">Office Barangay</th>
                <th style="size1">Office Address</th>
            </tr>
        </thead>
        <tbody>
            <tr onclick="getServiceAreaData('pnlServiceArea','14WU000128','MYTEST');">
                <td>14WU000128</td>
                <td>MYTEST</td>
                <td>Level 3 only</td>
                <td></td>
                <td>mytest</td>
                <td>123 123 1231</td>
                <td></td>
                <td>CAR - Cordillera Administrative Region</td>
                <td>ABRA</td>
                <td>LICUAN-BAAY (LICUAN)</td>
                <td>Cawayan</td>
                <td>mytest</td>
            </tr>
            <tr onclick="getServiceAreaData('pnlServiceArea','14WU000084','MYTESTSSS');">
                <td>14WU000084</td>
                <td>MYTESTSSS</td>
                <td>Level 3 only</td>
                <td>BWSA</td>
                <td>DFGDFG</td>
                <td></td>
                <td>652 454 6313</td>
      ...

CSS

.home .data-table {
    margin: 42px 0 0;
    width: 100%;
    position:relative
}
.size1{
    width:250px
}
.data-table table {
    padding: 0 !important;
    width: 100%;
    background-color: #fff;
        table-layout: auto !important;
}

table {
    border: 1px solid #aaa !important;
    border-collapse: collapse;
    width: 100%;
    text-align: left;
    padding: 0 1em;
    -moz-box-sizing: border-box;
}
.searchWSP .fixed thead tr {
    background-color: #EFEFEF;
}
.searchWSP .fixed tr {
    font-size: 1em;
}
.fixed tr {
    font-size: .9em;
}
table tr, td {
    border-collapse: collapse;
}
.home table th {
    color: #222;
    font-weight: bold;
    background-color: transparent;
}
table.borderBottom td {
    border-bottom: 1px solid #d8d8d8;
    border-right: 0 none;
}
.fixed td {
    word-wrap: break-word!important;
    line-height: 1.5em;
    vertical-align: top;
    border-right: 1px solid #d8d8d8;
}

JavaScript

var table = $('.fixed');
                if (table.length > 0) {
                    table.DataTable({
                        scrollY: "200px",
                        scrollX: true,
                        scrollCollapse: true,
                        paging: false,
                        "searching": false,
                        "bInfo": false,
                        sorting: [],
                        bSort: false,
                    });
                    new $.fn.dataTable.FixedColumns(table, {
                        leftColumns: 2
                    });
                   // table.columns.adjust().draw();
                    $('.tblComponents').css("display", "block");
                }