How to sort table columns with colspan by clicking on the header using jQuery

tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes.

Firstly you need to include below two javascript into your code which is helpful for sorting your table

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js" >

After that you must have to declare class name like <table class=”tablesorter”> so after that we can apply sorting based on that class name

<script type="text/javascript">
$(document).ready(function() { 
    $(".tablesorter").tablesorter({ 
    });     
});
</script>

Full code as below

<!DOCTYPE html>
<html>
<head>
<title>jQuery Tablesorter - Sort with colspan</title>
<style type="text/css">
body {
    padding: 20px;
}

p {
    margin-bottom: 10px;
}

strong {
    font-family: Arial;
    font-size: 18px;
}

table {
    border: 1px solid #ccc;
    font-family: Arial;
    margin-bottom: 20px;
}

td, th {
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
}

th {
    background: #fff;
    color: #555;
    padding: 10px 30px;
}

th:hover {
    cursor: pointer;
}

</style>
</head>
<body>

<h1>jQuery Tablesorter - Sort with colspan</h1>
 
    <table class="tablesorter">
        <thead>
            <tr>
                <th rowspan="2">Heading1</th>
                <th colspan="2">Heading 2 and 3</th>
            </tr>
            <tr>
                <th>Heading2</th>
                <th>Heading3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data11</td>
                <td>Data2c</td>
                <td>Data3a</td>
            </tr>
            <tr>
                <td>Data12</td>
                <td>Data2b</td>
                <td>Data3b</td>
            </tr>
            <tr>
                <td>Data13</td>
                <td>Data2a</td>
                <td>Data3c</td>
            </tr>
        </tbody>
    </table>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js" ></script>

<script type="text/javascript">
$(document).ready(function() { 
    $(".tablesorter").tablesorter({ 
    }); 
    
});
</script>
</html>

Related Posts

Divyesh Patel

I'm Divyesh Patel, Web & App developer. I want to make things that make a difference. With every line of code, i strive to make the web a beautiful place.

Leave a Reply