Datatable customization, Fixed Columns and headers, column-wise search

DataTable is a modern jQuery plugin for adding advanced controls to HTML tables for a software or web page. It has a variety of options for the developer’s custom changes as per the software requirements. Bellow are some  plugin’s features

  • pagination, 
  • sorting, 
  • searching, 
  • multiple-column ordering,
  • downloading excel,
  • downloading pdf,
  • print table....

In this article, we will develop the implementation of a global search, specific-column search filter, fixed column, and scrolling option using the DataTables plugin and bootstrap 4.6. in this article, the scrolling option provides better responsive features specific-column search option provides search operations in a single column which will improve the performance of the software or applications.

Tree directory structure  script With PHP
Let's create an index.html and insert a bellow HTML snippet
        
        <!-- Bootstrap 4.6 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

   <link rel="stylesheet" type="text/css"
       href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" />

   <link rel="stylesheet" type="text/css"
       href="https://datatables.net/release-datatables/extensions/FixedColumns/css/fixedColumns.bootstrap4.css">

   <!-- font awesome  -->
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" crossorigin="anonymous" />


   <link rel="stylesheet" type="text/css"
       href="https://cdn.datatables.net/fixedcolumns/3.3.2/css/fixedColumns.dataTables.min.css">


   <!-- custom style -->
   <link rel="stylesheet" href="css/style.css">

   <!-- jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

   <!-- pootstrap poper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

   <!-- bootstrap js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

   <!-- datatable -->
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

   <!-- datatabel fixed column -->
<script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>

   <!-- data table bootstrap -->
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>

   <!-- datatable bootstrap -->
<script src="js/custom-js.js"></script>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 ">
            <div class="container p-4">
                <div class="row w-100 d-flex justify-content-between">
                    <div class="col-md-12">
                        <div class="col-md-12 p-0 pb-3 filter_each_column_table_outer">
                            <table name="item" class="filter_each_column_table table table-bordered"
                                style="width: 100%;">
                                <tfoot>
                                    <tr>
                                        <th class="no_filter sorting_disabled">#</th>
                                        <th class="no_filter">Task title</th>
                                        <th>Title</th>
                                        <th>Association</th>
                                        <th>Last contacted</th>
                                        <th>Last Engagement</th>
                                        <th>Task type</th>
                                        <th>Due date</th>
                                        <th>Action</th>
                                    </tr>
                                </tfoot>
                                <thead>
                                    <tr>
                                        <th class="small_td no_filter sorting_disabled">
                                            #
                                        </th>
                                        <th class="">Task title</th>
                                        <th class="no_filter">Status</th>
                                        <th class="">Association </th>
                                        <th>Last contacted </th>
                                        <th>Last Engagement </th>
                                        <th>Task type </th>
                                        <th>Due date </th>
                                        <th>Action</th>
                                    </tr>
                                </thead>

                                <tbody id="tbodyid">
                                    <tr class="filter_me">
                                        <td>
                                            01
                                        </td>
                                        <td class="edit_task_btn_td filter_me">
                                            <div class="media">
                                                <img src="img/profile.jpg" class="mr-3" alt="..."
                                                    style="width:35px; border-radius:5px;">
                                                <div class="media-body">
                                                    <h6> Task title 01 <span class="text-success">(30%)</span>
                                                        <span class="edit_task_btn text-warning"
                                                            data-target="#add_task_pipeline_modal"
                                                            data-toggle="modal">
                                                            <i class="fas fa-pencil-alt"></i> </span>
                                                    </h6>


                                                </div>
                                            </div>
                                            <div class="progress progressbar_td">
                                                <div class="progress-bar" role="progressbar" style="width:30% "
                                                    aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                                </div>
                                            </div>

                                        </td>
                                        <td>
                                            <spam class="text-success"><i class="fas fa-check st_tick"></i> </spam>
                                        </td>

                                        <td class="">
                                            JOhn
                                        </td>

                                        <td>
                                            ---
                                        </td>
                                        <td>---</td>
                                        <td>---</td>
                                        <td>----</td>
                                        <td>-----</td>
                                    </tr>

                                    <tr class="filter_me">
                                        <td>
                                            02
                                        </td>
                                        <td class="edit_task_btn_td filter_me">
                                            <div class="media">
                                                <img src="img/profile.jpg" class="mr-3" alt="..."
                                                    style="width:35px; border-radius:5px;">
                                                <div class="media-body">
                                                    <h6> Task title 01 <span class="text-success">(30%)</span>
                                                        <span class="edit_task_btn text-warning"
                                                            data-target="#add_task_pipeline_modal"
                                                            data-toggle="modal">
                                                            <i class="fas fa-pencil-alt"></i> </span>
                                                    </h6>


                                                </div>
                                            </div>
                                            <div class="progress progressbar_td">
                                                <div class="progress-bar" role="progressbar" style="width:30% "
                                                    aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                                </div>
                                            </div>

                                        </td>
                                        <td>
                                            <spam class="text-success"><i class="fas fa-check st_tick"></i> </spam>
                                        </td>

                                        <td class="">
                                            Tom
                                        </td>

                                        <td>
                                            ---
                                        </td>
                                        <td>---</td>
                                        <td>---</td>
                                        <td>----</td>
                                        <td>-----</td>
                                    </tr>

                                    <tr class="filter_me">
                                        <td>
                                            02
                                        </td>
                                        <td class="edit_task_btn_td filter_me">
                                            <div class="media">
                                                <img src="img/profile.jpg" class="mr-3" alt="..."
                                                    style="width:35px; border-radius:5px;">
                                                <div class="media-body">
                                                    <h6> Task title 01 <span class="text-success">(30%)</span>
                                                        <span class="edit_task_btn text-warning"
                                                            data-target="#add_task_pipeline_modal"
                                                            data-toggle="modal">
                                                            <i class="fas fa-pencil-alt"></i> </span>
                                                    </h6>


                                                </div>
                                            </div>
                                            <div class="progress progressbar_td">
                                                <div class="progress-bar" role="progressbar" style="width:30% "
                                                    aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                                </div>
                                            </div>

                                        </td>
                                        <td>
                                            <spam class="text-success"><i class="fas fa-check st_tick"></i> </spam>
                                        </td>

                                        <td class="">
                                            Sohan
                                        </td>

                                        <td>
                                            ---
                                        </td>
                                        <td>---</td>
                                        <td>---</td>
                                        <td>----</td>
                                        <td>-----</td>
                                    </tr>

                                    <tr class="filter_me">
                                        <td>
                                            01
                                        </td>
                                        <td class="edit_task_btn_td filter_me">
                                            <div class="media">
                                                <img src="img/profile.jpg" class="mr-3" alt="..."
                                                    style="width:35px; border-radius:5px;">
                                                <div class="media-body">
                                                    <h6> Task title 01 <span class="text-success">(30%)</span>
                                                        <span class="edit_task_btn text-warning"
                                                            data-target="#add_task_pipeline_modal"
                                                            data-toggle="modal">
                                                            <i class="fas fa-pencil-alt"></i> </span>
                                                    </h6>


                                                </div>
                                            </div>
                                            <div class="progress progressbar_td">
                                                <div class="progress-bar" role="progressbar" style="width:30% "
                                                    aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                                </div>
                                            </div>

                                        </td>
                                        <td>
                                            <spam class="text-success"><i class="fas fa-check st_tick"></i> </spam>
                                        </td>

                                        <td class="">
                                            JOhn
                                        </td>

                                        <td>
                                            ---
                                        </td>
                                        <td>---</td>
                                        <td>---</td>
                                        <td>----</td>
                                        <td>-----</td>
                                    </tr>

                                    <tr class="filter_me">
                                        <td>
                                            02
                                        </td>
                                        <td class="edit_task_btn_td filter_me">
                                            <div class="media">
                                                <img src="img/profile.jpg" class="mr-3" alt="..."
                                                    style="width:35px; border-radius:5px;">
                                                <div class="media-body">
                                                    <h6> Task title 01 <span class="text-success">(30%)</span>
                                                        <span class="edit_task_btn text-warning"
                                                            data-target="#add_task_pipeline_modal"
                                                            data-toggle="modal">
                                                            <i class="fas fa-pencil-alt"></i> </span>
                                                    </h6>


                                                </div>
                                            </div>
                                            <div class="progress progressbar_td">
                                                <div class="progress-bar" role="progressbar" style="width:30% "
                                                    aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                                </div>
                                            </div>

                                        </td>
                                        <td>
                                            <spam class="text-success"><i class="fas fa-check st_tick"></i> </spam>
                                        </td>

                                        <td class="">
                                            Tom
                                        </td>

                                        <td>
                                            ---
                                        </td>
                                        <td>---</td>
                                        <td>---</td>
                                        <td>----</td>
                                        <td>-----</td>
                                    </tr>

                                    <tr class="filter_me">
                                        <td>
                                            02
                                        </td>
                                        <td class="edit_task_btn_td filter_me">
                                            <div class="media">
                                                <img src="img/profile.jpg" class="mr-3" alt="..."
                                                    style="width:35px; border-radius:5px;">
                                                <div class="media-body">
                                                    <h6> Task title 01 <span class="text-success">(30%)</span>
                                                        <span class="edit_task_btn text-warning"
                                                            data-target="#add_task_pipeline_modal"
                                                            data-toggle="modal">
                                                            <i class="fas fa-pencil-alt"></i> </span>
                                                    </h6>


                                                </div>
                                            </div>
                                            <div class="progress progressbar_td">
                                                <div class="progress-bar" role="progressbar" style="width:30% "
                                                    aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                                </div>
                                            </div>

                                        </td>
                                        <td>
                                            <spam class="text-success"><i class="fas fa-check st_tick"></i> </spam>
                                        </td>

                                        <td class="">
                                            Sohan
                                        </td>

                                        <td>
                                            ---
                                        </td>
                                        <td>---</td>
                                        <td>---</td>
                                        <td>----</td>
                                        <td>-----</td>
                                    </tr>

                                    <tr class="filter_me">
                                        <td>
                                            01
                                        </td>
                                        <td class="edit_task_btn_td filter_me">
                                            <div class="media">
                                                <img src="img/profile.jpg" class="mr-3" alt="..."
                                                    style="width:35px; border-radius:5px;">
                                                <div class="media-body">
                                                    <h6> Task title 01 <span class="text-success">(30%)</span>
                                                        <span class="edit_task_btn text-warning"
                                                            data-target="#add_task_pipeline_modal"
                                                            data-toggle="modal">
                                                            <i class="fas fa-pencil-alt"></i> </span>
                                                    </h6>


                                                </div>
                                            </div>
                                            <div class="progress progressbar_td">
                                                <div class="progress-bar" role="progressbar" style="width:30% "
                                                    aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                                </div>
                                            </div>

                                        </td>
                                        <td>
                                            <spam class="text-success"><i class="fas fa-check st_tick"></i> </spam>
                                        </td>

                                        <td class="">
                                            JOhn
                                        </td>

                                        <td>
                                            ---
                                        </td>
                                        <td>---</td>
                                        <td>---</td>
                                        <td>----</td>
                                        <td>-----</td>
                                    </tr>

                                    <tr class="filter_me">
                                        <td>
                                            02
                                        </td>
                                        <td class="edit_task_btn_td filter_me">
                                            <div class="media">
                                                <img src="img/profile.jpg" class="mr-3" alt="..."
                                                    style="width:35px; border-radius:5px;">
                                                <div class="media-body">
                                                    <h6> Task title 01 <span class="text-success">(30%)</span>
                                                        <span class="edit_task_btn text-warning"
                                                            data-target="#add_task_pipeline_modal"
                                                            data-toggle="modal">
                                                            <i class="fas fa-pencil-alt"></i> </span>
                                                    </h6>


                                                </div>
                                            </div>
                                            <div class="progress progressbar_td">
                                                <div class="progress-bar" role="progressbar" style="width:30% "
                                                    aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                                </div>
                                            </div>

                                        </td>
                                        <td>
                                            <spam class="text-success"><i class="fas fa-check st_tick"></i> </spam>
                                        </td>

                                        <td class="">
                                            Tom
                                        </td>

                                        <td>
                                            ---
                                        </td>
                                        <td>---</td>
                                        <td>---</td>
                                        <td>----</td>
                                        <td>-----</td>
                                    </tr>

                                    <tr class="filter_me">
                                        <td>
                                            02
                                        </td>
                                        <td class="edit_task_btn_td filter_me">
                                            <div class="media">
                                                <img src="img/profile.jpg" class="mr-3" alt="..."
                                                    style="width:35px; border-radius:5px;">
                                                <div class="media-body">
                                                    <h6> Task title 01 <span class="text-success">(30%)</span>
                                                        <span class="edit_task_btn text-warning"
                                                            data-target="#add_task_pipeline_modal"
                                                            data-toggle="modal">
                                                            <i class="fas fa-pencil-alt"></i> </span>
                                                    </h6>


                                                </div>
                                            </div>
                                            <div class="progress progressbar_td">
                                                <div class="progress-bar" role="progressbar" style="width:30% "
                                                    aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                                </div>
                                            </div>

                                        </td>
                                        <td>
                                            <spam class="text-success"><i class="fas fa-check st_tick"></i> </spam>
                                        </td>

                                        <td class="">
                                            Sohan
                                        </td>

                                        <td>
                                            ---
                                        </td>
                                        <td>---</td>
                                        <td>---</td>
                                        <td>----</td>
                                        <td>-----</td>
                                    </tr>

                                    <tr class="filter_me">
                                        <td>
                                            01
                                        </td>
                                        <td class="edit_task_btn_td filter_me">
                                            <div class="media">
                                                <img src="img/profile.jpg" class="mr-3" alt="..."
                                                    style="width:35px; border-radius:5px;">
                                                <div class="media-body">
                                                    <h6> Task title 01 <span class="text-success">(30%)</span>
                                                        <span class="edit_task_btn text-warning"
                                                            data-target="#add_task_pipeline_modal"
                                                            data-toggle="modal">
                                                            <i class="fas fa-pencil-alt"></i> </span>
                                                    </h6>


                                                </div>
                                            </div>
                                            <div class="progress progressbar_td">
                                                <div class="progress-bar" role="progressbar" style="width:30% "
                                                    aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                                </div>
                                            </div>

                                        </td>
                                        <td>
                                            <spam class="text-success"><i class="fas fa-check st_tick"></i> </spam>
                                        </td>

                                        <td class="">
                                            JOhn
                                        </td>

                                        <td>
                                            ---
                                        </td>
                                        <td>---</td>
                                        <td>---</td>
                                        <td>----</td>
                                        <td>-----</td>
                                    </tr>

                                    <tr class="filter_me">
                                        <td>
                                            02
                                        </td>
                                        <td class="edit_task_btn_td filter_me">
                                            <div class="media">
                                                <img src="img/profile.jpg" class="mr-3" alt="..."
                                                    style="width:35px; border-radius:5px;">
                                                <div class="media-body">
                                                    <h6> Task title 01 <span class="text-success">(30%)</span>
                                                        <span class="edit_task_btn text-warning"
                                                            data-target="#add_task_pipeline_modal"
                                                            data-toggle="modal">
                                                            <i class="fas fa-pencil-alt"></i> </span>
                                                    </h6>


                                                </div>
                                            </div>
                                            <div class="progress progressbar_td">
                                                <div class="progress-bar" role="progressbar" style="width:30% "
                                                    aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                                </div>
                                            </div>

                                        </td>
                                        <td>
                                            <spam class="text-success"><i class="fas fa-check st_tick"></i> </spam>
                                        </td>

                                        <td class="">
                                            Tom
                                        </td>

                                        <td>
                                            ---
                                        </td>
                                        <td>---</td>
                                        <td>---</td>
                                        <td>----</td>
                                        <td>-----</td>
                                    </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
        
    
Create style.css for customization of table styling
        
        /*data table with filter*/
.filter_each_column_table.dataTable th,
.filter_each_column_table.dataTable td {
    font-size: 14px !important;
    min-width: 200px;
}

.filter_each_column_table.dataTable th {
    border-bottom: 0px;
    background-color: #f5f8fa !important;
}

.filter_each_column_table.dataTable th:hover {
    background-color: #e5f5f8;
}

.filter_each_column_table.dataTable tr {
    background-color: #fff !important;
    /*border-top:1px solid rgb(223, 227, 235);*/
    border-bottom: 1px solid rgb(223, 227, 235);
}

.filter_each_column_table.dataTable tr:hover {
    background-color: #f5f8fa !important;
    /*border-top:1px solid rgb(223, 227, 235);*/
    border-bottom: 1px solid rgb(223, 227, 235);
}

.filter_each_column_table.dataTable td {
    border-left: 0px solid transparent;
    border-right: 0px solid transparent;
    padding: 8px;
    /*border-top: 0px solid transparent;*/
}

.filter_each_column_table_outer .bottom,
.data_table_simple_outer .bottom {
    display: flex;
    justify-content: space-between;
}

.filter_each_column_table.DTFC_Cloned th:first-child::after,
.filter_each_column_table.DTFC_Cloned td:first-child::after,
.filter_each_column_table.DTFC_Cloned th:first-child::before,
.filter_each_column_table.DTFC_Cloned td:first-child::before {
    display: none !important;
}

.filter_each_column_table.DTFC_Cloned th:first-child,
.filter_each_column_table.DTFC_Cloned td:first-child {
    padding-right: 0px !important;
}

.filter_each_column_table_outer .dataTables_filter label {
    width: auto;
}

.filter_each_column_table_outer {
    position: relative;
}

.progressbar_td {
    height: 4px;
    margin-bottom: -8px !important;
    /* background: transparent; */
}

.filter_each_column_table.dataTable th:first-child,
.filter_each_column_table.dataTable td:first-child {
    min-width: 25px;
    text-align: center;
}

.filter_each_column_table.dataTable th:nth-child(2),
.filter_each_column_table.dataTable td:nth-child(2) {
    min-width: 240px;
    text-align: left;
}

.filter_each_column_table.dataTable th:nth-child(2),
.filter_each_column_table.dataTable td:nth-child(2) {
    border-right: 1px solid #ccc;
}

.filter_each_column_table .DTFC_Cloned th,
.filter_each_column_table .DTFC_Cloned td {
    background: var(--light);
}

.text-success .st_tick {
    border: 1px solid #35c756;
    color: #35c756;
}

.st_tick {
    background-color: #f4f7f9;
    border: 1px solid #d1e3f3;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    color: #d1e3f3;
}

.table_with_min_width_td.table-striped thead tr {
    background: #f5f8fa;
}

.table_with_min_width_td.table-striped tbody tr:nth-of-type(odd) {
    background: #fff;
}

.table_with_min_width_td.table-striped tbody tr:nth-of-type(even) {
    background: #fff;
}

.edit_task_btn_td:hover .edit_task_btn {
    display: inline-block;
    line-height: 20px;
}

.edit_task_btn {
    display: none;
    background-color: #f4f7f9;
    border: 1px solid #d1e3f3;
    padding: 0px 10px;
    border-radius: 5px;
    text-align: center;
    line-height: 25px;
    color: #555;
    cursor: pointer;
    margin-left: 10px;
    line-height: 20px;
}

.edit_task_btn:hover {
    border: 1px solid #d1e3f3;
    background-color: #e5f5f8;
}

/*custom table styling starts from here*/
.table_with_min_width_td th,
.table_with_min_width_td td {
    font-size: 12px !important;
    min-width: 200px;
    text-align: left;
    padding: 12px 10px;
}

.table_with_min_width_td th {
    border-bottom: 0px;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 13px !important;
}

.table_with_min_width_td th:hover {
    background-color: #e5f5f8;
}

.table_with_min_width_td tr:hover {
    background-color: #f5f8fa !important;
    /*border-top:1px solid rgb(223, 227, 235);*/
    border-bottom: 1px solid rgb(223, 227, 235);
}

.table_with_min_width_td td {
    border-left: 0px solid transparent;
    border-right: 0px solid transparent;
    padding: 8px;
    /*border-top: 0px solid transparent;*/
}

.table_with_min_width_td_outer {
    text-align: right !important;
}

.table_with_min_width_td_outer label {
    width: auto;
}

.table_with_min_width_td th:first-child,
.table_with_min_width_td td:first-child {
    min-width: 25px;
}

.table_with_min_width_td th:nth-child(2),
.table_with_min_width_td td:nth-child(2) {
    min-width: 25px;
}

.table_with_min_width_td thead tr {
    background: #f5f8fa;
}

.table_with_min_width_td tbody tr:nth-of-type(odd) {
    background: #fff;
}

.table_with_min_width_td tbody tr:nth-of-type(even) {
    background: #fff;
}
        
    

Related Post

Now create a custom-js.js file for implementing Datatable functions
        
        $(document).ready(function () {
    // Setup - add a text input to each footer cell
    $(".filter_each_column_table tfoot th").each(function () {
        var title = $(this).text();
        $(this)
            .not(".no_filter")
            .html('<input type="text" class="form-control" placeholder="Search ' + title + '" />');
    });

    // DataTable
    var table = $(".filter_each_column_table").DataTable({
        initComplete: function () {
            // Apply the search
            this.api()
                .columns()
                .every(function () {
                    var that = this;

                    $("input", this.footer()).on("keyup change clear", function () {
                        if (that.search() !== this.value) {
                            that.search(this.value).draw();
                        }
                    });
                });
        },

        columnDefs: [
            { orderable: false, targets: [1] },
            // { "orderable": true, "targets": [ 2, 3] }
        ],
        fixedColumns: {
            leftColumns: 2,
            // rightColumns: 1
        },
        pageLength: 20,
        scrollY: "58vh",
        scrollX: true,
        scrollCollapse: true,
        dom: '<"top">rt<"bottom"lfip><"clear">',
        // searching:false,
        pagingType: "full_numbers",
    });
});
        
    

Leave a comment