0

表格排序器和 jQuery

我将http://tablesorter.com/docs/用于一个项目。

信息

我已将两个列标题合并/合并为一个。这意味着缺少第三列的一种排序。

jsFiddle

http://jsfiddle.net/RqN8a/18/

问题

我可以强制将最后一列的排序添加回合并/跨页标题吗？

HTML（如果 jsFiddle 不起作用）

<p>
<strong>This works</strong>
</p>

<table class="tablesorter">
<thead>
<tr>
    <th>Heading1</th>
    <th>Heading2</th>
    <th>Heading3</th>
</tr>
</thead>
<tbody>
<tr>
    <td>Data1a</td>
    <td>Data2a</td>
    <td>Data3a</td>
</tr>
    <tr>
    <td>Data1b</td>
    <td>Data2b</td>
    <td>Data3b</td>
</tr>
</tbody>
</table>

<p>
    <strong>Can this work?</strong><br>
    Another arrow should be added for sorting the "Data3" column
</p>

<table class="tablesorter">
<thead>
<tr>
    <th>Heading1</th>
    <th colspan="2">?   Heading2</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>

内联 jQuery（以防 jsFiddle 不起作用）

$(document).ready(function() { 
    $("table").tablesorter({ 
    }); 
});

​</p>

4

2 回答 2

1

据我所知，没有必要改变太多。

只需按如下方式更改您的第二个 HTML 即可实现您的愿望：-

<table class="tablesorter2">
    <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>

参考现场演示

于 2012-12-04T09:03:53.473 回答
-1

我实现了 tablesorter jQuery 插件以使用 colspan 对表应用排序

<!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>

这是设置的参考链接https://shinerweb.com/how-to-sort-table-columns-with-colspan-by-clicking-on-the-header-using-jquery/

于 2022-02-15T06:27:47.420 回答