jQuery允许我对表进行筛选

Question

嗨，我想知道我如何使用这个插件与我的表，因为我有我的表布局不同于他们如何有。

我使用下面的表格布局

<table>
    <thead>
        <tr>
            <th>list</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>A</td></tr>
        <tr><td>B</td></tr>
        <tr><td>A</td></tr>
    </tbody>
</table>

而他们使用

<table>
   <tr><th>Name</th>
   <th>Score</th>
   <th class="ui-tableFilter-date">Date</th></tr>
   <tr><td>Chris</td><td>1</td><td>1/2/2011</td></tr>
   <tr><td>Micah</td><td>2</td><td>1/4/2011</td></tr>
   <tr><td>Derek</td><td>3</td><td>1/6/2011</td></tr>
   <tr><td>Derek</td><td>5</td><td>1/14/2011</td></tr>
   <tr><td>Chris</td><td>2</td><td>1/10/2011</td></tr>
   <tr><td>John</td><td>3</td><td>2/2/2011</td></tr>
</table>

插件是http://dotbotdesign.com/tutorials/tableFilter/

基本上我需要能够过滤我的表。

只是为了增加神秘感，似乎必须在某个地方有一个jquery错误，但我看不到它，因为当我做这一切作为html代码它工作得很好。

    function listallleads(){

    var script = document.createElement('link');
    script.href = 'theme/style/manageleads.css';
    script.rel  = 'stylesheet';
    script.type = 'text/css';
    document.getElementsByTagName('head')[0].appendChild(script);
    if ($.browser.msie && $.browser.version == 8) {
        var script = document.createElement('link');
        script.href = 'theme/style/ie-manageleads.css';
        script.rel  = 'stylesheet';
        script.type = 'text/css';
        document.getElementsByTagName('head')[0].appendChild(script);
    }

    $.getJSON('system/classes/core.php?task=listmyleads&userid='+userid+'&usertype='+usertype+'&callback=?', function(dataleads) {
      $.each(dataleads,function(i, myleads){
        var businessname = "";
        if(myleads.Company == null || myleads.Company == "null" || myleads.Company == "")
        {
        businessname = myleads.TradingName; 
        }
        else
        {
        businessname = myleads.Company;
        }
        if(usertype == 3)
        {
            if(myleads.AMStatus == 1)
            {
            leadstatus = "Confirmed";   
            }
            else 
            {
            leadstatus = "Not Confirmed";   
            }
        }
        else 
        {
            leadstatus = leadstatusselect(myleads.LeadStatus);
        }
        if(myleads.AMStatus == 1)
        {
            myleads.AMStatus = "one";
        }
        if(myleads.iNcardRecharged == 0)
        {
            myleads.iNcardRecharged = "No";
        }
        else if(myleads.iNcardRecharged == 1)
        {
            myleads.iNcardRecharged = "Yes";
        }

        var s = myleads.Phone;
        s = s.replace('(', '');
        s = s.replace(')', '');
        s = s.replace(/ /g, '');
        myleads.Phone = s;
        //alert(s);
        cssstats = "lead"+myleads.AMStatus;

            $("tbody").append('<tr id="'+myleads.customer_id+' class="'+cssstats+'">'+
'           <td id="row" class="small"><input id="'+myleads.customer_id+'" type="checkbox"></td>'+
'           <td>'+myleads.CreatedTime+'</td>'+
'           <td>'+businessname+'</td>'+
'           <td class="center">'+myleads.FirstName+' '+myleads.LastName+'</td>'+
'           <td class="center">'+myleads.Phone+'</td>'+
'           <td class="center bigger">'+myleads.Email+'</td>'+
'           <td class="center">'+myleads.stafffirstname+' '+myleads.stafflastname+'</td>'+
'           <td class="center">'+leadstatus+'</td>'+
'           <td class="center last">'+myleads.iNcardRecharged+'</td>'+
'       </tr>');
      });
        qs.cache();
        $("table").tableFilter("table");
    });
    if(usertype == 3)
    {
    leadtype = "A/M Status";    
    }
    else
    {
    leadtype = "Lead Status";   
    }
    $("#todo_bg").hide();
    $("#menuarea").html('<a id="gotohome"><div id="backmain" class="backbg">Back</div></a><div id="nav" class="backbgright">Manage Business Lead</div>'+
                        '<div id="dowithleads"><button id="editlisting" class="blackbutton manage">Edit Listing</button><button id="sendemailout" class="blackbutton manage">Send Message</button> <button id="deletelead" class="blackbutton manage">Delete Lead</button>'+
                        '<div id="searchbox"><form action="#"><fieldset><input type="text" name="search" value="" id="searchleads" placeholder="Search" autofocus /></fieldset></form></div>'+
                        '</div>'+
                        '<div id="dowithleads"><table cellpadding="0" cellspacing="0" border="0" class="sortable paginated scrollTable" id="manageleads">'+
'   <thead class="fixedHeader">'+
'       <tr>'+
'           <th class="small" id="first"><input type="checkbox" class="checkbox checkall" value="Yes"></th>'+
'           <th class="sort-alpha ui-tableFilter-date">Created Time</th>'+
'           <th class="sort-alpha">Company</th>'+
'           <th class="sort-alpha">Lead Name</th>'+
'           <th class="sort-alpha">Phone No.</th>'+
'           <th class="sort-alpha bigger">Email</th>'+
'           <th class="sort-alpha">Lead Owner</th>'+
'           <th class="sort-alpha">'+leadtype+'</th>'+
'       </tr>'+
'   </thead>'+
'   <tbody class="scrollContent"></tbody>'+
'</table></div>');  
    $('thead tr').append('<th class="center last">Card Charged</th>');
    /*setTimeout(function(){
    var script = document.createElement('script');
    script.src = 'js/table.js';
    script.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(script); 
    stripedTable();
    },2000);
    */
    var script = document.createElement('script');
    script.src = 'js/cornz.js';
    script.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(script); 
    stripedTable();

    var qs = $('input#searchleads').quicksearch('table#manageleads tbody tr');
}

Answer 1

你可以尝试用这个jQuery插件叫做js-tables。它不仅支持过滤，还支持排序。