File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container-fluid">
        <div class='date-bg'>             
            <div class='dateinput'>
                <label class='sdate'>Start date:</label><input type="text" id="sdate" name="sdate" placeholder="YYYY-MM-DD hh:mm:ss">
            </div>
            <div class='dateinput'>
                <label class='edate'>End date:</label><input type="text" id="edate" name="edate" placeholder="YYYY-MM-DD hh:mm:ss">
            </div>
            <div class='loadButton'>
                <button type="button" id="loadTable" name="loadTable">Submit</button>
            </div>
        </div>
        <div class="new-line">
            <button class="collapsible">Filter</button>
            <div class="content">
                <span><b>Select columns to be hidden:</b></span> <br>
                <table id='filter_table'>
                    <tr>
                        <td><span><label for="c1">Column 1: </label></span> <input type="checkbox" id="c1" class="toggle-vis checkbox" data-column="0" name="c1"></td>
                        <td><span><label for="c2">Column 2: </label></span> <input type="checkbox" id="c2" class="toggle-vis checkbox" data-column="1" name="c2"></td>
                        <td><span><label for="c3">Column 3: </label></span> <input type="checkbox" id="c3" class="toggle-vis checkbox" data-column="2" name="c3"></td>
                        <td><span><label for="c4">Column 4: </label></span> <input type="checkbox" id="c4" class="toggle-vis checkbox" data-column="3" name="c4"></td>
                        <td><span><label for="c5">Column 5: </label></span> <input type="checkbox" id="c5" class="toggle-vis checkbox" data-column="4" name="c5"></td>
                    </tr>
                    <tr>
                        <td><span><label for="c6">Column 6: </label></span> <input type="checkbox" id="c6" class="toggle-vis checkbox" data-column="5" name="c6"></td>
                    </tr>
                </table>
            </div>
            <div id="big_table">
                <table id="data_table" class="table table-hover display nowrap row-border cell-border hidden" style="width:100%">
                    <thead>
                     <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                  </thead>
                </table>
            </div>
        </div>
    </div>
 
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
CSSSaved
 
#big_table
{
    margin-top: 10px;
}
​
th 
{
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    text-align: center;
}
​
th:first-child 
{
    border-left: 1px solid #dddddd;
}
   
​
.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    margin-top: 10px;
}
​
.collapsible:hover 
{
        background-color: #555;
}
​
.collapsible:after 
{
        content: '\002B';
        color: white;
        font-weight: bold;
        float: right;
        margin-left: 5px;
}
​
.active_collapsible:after 
{
    content: "\2212";
}
​
.content 
{
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
}
​
input.checkbox
{
    transform: scale(2);
    margin: 30px;
    position: relative;
    white-space: nowrap;
    vertical-align: middle;
    flex-wrap: wrap;
}
​
label 
{
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
​
.material-icons, .icon_text 
{
    vertical-align: middle;
}
​
.material-icons 
{
    padding-bottom: 3px;
    margin-right: 30px;
}
​
#filter_table td
{
    text-align: right;
}
​
.hidden
{
    display: none;
}
​
.sdate, .edate
{
    text-align: right;
    margin-right: 10px;
    width: 100px;
}
​
.dateinput
{
    margin-top: 10px;
}
​
#loadTable
{
    border-width: 1px;
    margin-left: 235px;
    margin-top: 10px;
    margin-bottom: 10px;
}
​
.date-bg
{
    margin-top: 10px;
    background-color: #f1f1f1;
    width: 350px;
    left: 10px;
    float: left;
}
​
.new-line
{
    clear: both;
}
​
#filter_table
{
    margin: 0 auto;
}
​
#data_table
{
    width: 100%;
}
JavaScriptSaved
 
$(document).ready(function(){
    $("#loadTable").one("click", function()
    {
        $("#data_table").removeClass("hidden");
        var table = $('#data_table').DataTable({
            "scrollX": true,
            "scrollY": "400px",
            "fixedHeader": true,
            "processing": true,
            "serverSide": true,
            "bFilter": false,
             "ajax": "/ssp/server_processing.php"
            
        });
        $('#data_table').DataTable().columns.adjust().draw();
    });
  
    $('input.toggle-vis').on( 'click', function (e) {
        e.preventDefault();
​
        // Get the column API object
        var column = $('#data_table').DataTable().column( $(this).attr('data-column') );
​
        // Toggle the visibility
        column.visible( ! column.visible() );
        $('#data_table').DataTable().columns.adjust().draw();
    });
​
    // Create event to update Datatable
    $("#loadTable").click(function()
    {
            $('#data_table').DataTable().ajax.reload();
    });
});
​
​
​
var coll = document.getElementsByClassName("collapsible");
var i;
​
for (i = 0; i < coll.length; i++) 
{
    coll[i].addEventListener("click", function ()
     {
        this.classList.toggle("active_collapsible");
        var content = this.nextElementSibling;
        if (content.style.maxHeight) 
        {
            content.style.maxHeight = null;
        } 
        else 
        {
            content.style.maxHeight = content.scrollHeight + "px";
        }
    });
}
​
​
​
​
1 warning
Line 55: Don't make functions within a loop.
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers