1

The Table includes this field:

Name Age City State
1

Please follow the below steps.

Use a sorting class for each field.

<table class="data">
    <thead>
        <tr>
            <th class="sorting" >Name</th>
            <th class="sorting">Age</th>
            <th class="sorting">City</th>
            <th class="sorting">State</th>
        </tr>
    </thead>
</table> 

Then include this script:

<script>
    $(document).ready(function () {
        setTimeout(function() {
            $("th.sorting").each(function(){
                var th_obj = $(this);
                
       th_obj.removeClass('ordered').removeClass('asc').removeClass('desc');
                var a_class = th_obj.find('a').attr("class");
                if(a_class != '' && a_class != undefined) {
                    th_obj.addClass('ordered').addClass(a_class);
                }
            });
        }, 100);
    });
</script>

Also Include CSS for sorting class: (You can change this according to your use and theme)

table.data thead th.ordered:not(.loading):after {
    display: block;
    content: '';
    font-size: 0;
    width: 5px;
    height: 5px;
    border: solid #596673;
    border-width: 0 2px 2px 0;
    position: absolute;
}
table.data thead th.ordered {
   background-color:unset;
}
body.ltr table.data thead th.ordered:not(.desc):after {
    top: calc(50% - 1px);
}
body.ltr table.data thead th.ordered.desc:after {
     top: calc(50% - 4px);
}

I hope this will work for you.

Thanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.