Mam duży stół i chcę dodać funkcję wyszukiwania na nim. Użyłem TableSorter do wykonania sortowników kolumn, a także samouczek, aby dodać kolejną kolumnę na początku do numerowania wierszy. Ale wyszukiwanie nie działa. Oto mój kod:

HTML

<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="/static/js/jquery.tablesorter.pager.js"></script>
<script src="/static/js/jquery.quicksearch.js" type="text/javascript"></script>
    <table id="myTable" class="table table-bordered tablesorter">
       <thead>

       </thead>
       <tbody>

       </tbody>
       <tfoot>
         <tr style="display:none;">
             <td colspan="5">
                 No rows match the filter...
             </td>
        </tr>       
       </tfoot>
    </table>
    <div id="pager" class="pager">
        <form>
             <img src="/static/blue/first.png" class="first"/>
             <img src="/static/blue/prev.png" class="prev"/>
             <input type="text" class="pagedisplay"/>
             <img src="/static/blue/next.png" class="next"/>
             <img src="/static/blue/last.png" class="last"/>
             <select class="pagesize">
             <option value="10">10 per page</option>
             <option value="20">20 per page</option>
             <option value="50">50 per page</option>
             </select>
       </form>
    </div>

A oto mój javascript:

<script>
$(document).ready(function() 
    {
    $.tablesorter.addWidget({
    id: "numbering",
    format: function(table) {
        var c = table.config;
        $("tr:visible", table.tBodies[0]).each(function(i) {
            $(this).find('td').eq(0).text(i + 1);
        });
    }
});


    $("table").tablesorter({widgets: ['numbering'],sortInitialOrder: 'desc', sortList: [[2,1]],headers: {0: {sorter: false}}})
    .tablesorterPager({container: $("#pager")});

    $("#myTable tbody tr").quicksearch({
            labelText: 'Search: ',
            attached: '#myTable',
            position: 'before',
            delay: 100,
            loaderText: 'Loading...',
            onAfter: function() {
                if ($("#myTable tbody tr:visible").length != 0) {
                    $("#myTable").trigger("update");
                    $("#myTable").trigger("appendCache");
                    $("#myTable tfoot tr").hide();
                }
                else {
                    $("#myTable tfoot tr").show();
                }
            }
        });

    }

</script>

Nie widzę żadnego błędu. Tylko funkcja wyszukiwania nie ma tam.

1
Tasos 6 grudzień 2013, 11:52

2 odpowiedzi

Najlepsza odpowiedź

Wygląda na to, że QuickSearch jest przymocowany do #table, a nie #myTable, który jest identyfikatorem tabeli w Udostępnionym HTML.

0
Mottie 6 grudzień 2013, 08:15

Możesz dać DataTables.js / spróbuj. Jest to wtyczka jQuery, która zrobi, co próbujesz zbudować i jest bardzo proste do wdrożenia.

Kodeks do wdrożenia go (który ma stronicowania, wyszukiwania, sortowania kolumn itp. Jak to jest domyślne).

  $('#example').dataTable();
0
Bob Tate 6 grudzień 2013, 08:03