通过Jquery Ajax使Thead成为固定标题

Question

我无法通过Jquery Ajax将Thead作为固定标题

我正在使用动态绑定表，我正在使用表分类器。 我已经尝试了固定的标题代码，但我的非标题的td没有获得标题的宽度。

以下是我的示例代码@ jsfiddle.net

Answer 1

＆＃13;

＆＃13;

///////////------------------------  sort Table -----------------////

function sortTable(n, selector) {

    var table, rows, switching, i, x, y, shouldSwitch, switchcount = 0;

    table = $(selector).children('tbody');

    $('' + selector + ' thead tr td[data-sort=1]').removeAttr('class');
    $('' + selector + ' thead tr td[data-sort=1]').addClass('sort');
    ///$('' + selector + ' thead tr td:last').removeAttr('class');
    var tableRow = $('' + selector + ' thead tr');

    switching = true;

    //Set the sorting direction to ascending:
    dir = "asc";
    /*Make a loop that will continue until
    no switching has been done:*/
    while (switching) {
        //start by saying: no switching is done:
        switching = false;
        rows = $(table).find('tr'); ///table.getElementsByTagName("TR");

        /*Loop through all table rows (except the
        first, which contains table headers):*/
        for (i = 0; i < (rows.length - 1) ; i++) {
            //start by saying there should be no switching:
            shouldSwitch = false;
            /*Get the two elements you want to compare,
            one from current row and one from the next:*/
            x = rows[i].getElementsByTagName("TD")[n];
            y = rows[i + 1].getElementsByTagName("TD")[n];
            /*check if the two rows should switch place,
            based on the direction, asc or desc:*/

            if (x != null && y != null) {
                if (dir == "asc") {

                    $(tableRow).find('td:eq(' + n + ')').removeClass('sort');
                    $(tableRow).find('td:eq(' + n + ')').removeClass('dsc-sort');
                    $(tableRow).find('td:eq(' + n + ')').addClass('asc-sort');

                    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                        //if so, mark as a switch and break the loop:
                        shouldSwitch = true;
                        break;
                    }
                } else if (dir == "desc") {

                    $(tableRow).find('td:eq(' + n + ')').removeClass('sort');
                    $(tableRow).find('td:eq(' + n + ')').removeClass('asc-sort');
                    $(tableRow).find('td:eq(' + n + ')').addClass('dsc-sort');

                    if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                        //if so, mark as a switch and break the loop:
                        shouldSwitch = true;
                        break;
                    }
                }
            }
        }
        if (shouldSwitch) {
            /*If a switch has been marked, make the switch
            and mark that a switch has been done:*/
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
            //Each time a switch is done, increase this count by 1:
            switchcount++;
        } else {
            /*If no switching has been done AND the direction is "asc",
            set the direction to "desc" and run the while loop again.*/
            if (switchcount == 0 && dir == "asc") {
                dir = "desc";
                switching = true;
            }
        }
    }
}

///////////------------------------  pagination Table -----------------////

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <table class="table table-bordered" id="tbCategory">
                                <thead>
                                    <tr>
                                        <td onclick="sortTable(0,'#tbCategory')" data-sort="1" class="sort">S. No</td>
                                        <td onclick="sortTable(1,'#tbCategory')" data-sort="1" class="sort">Name</td>
                                        <td onclick="sortTable(2,'#tbCategory')" data-sort="1" class="sort">Status</td>
                                        <td data-sort="0">Action</td>
                                    </tr>
                                </thead>
                                 <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>2</td>
                                        <td>3</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>3</td>
                                        <td>4</td>
                                        <td></td>
                                    </tr>
                                </tbody>
                               
                            </table>

＆＃13;

＆＃13;

＆＃13;

使用这种方法它工作正常。