jQuery允许我使用Table过滤器

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

您可以尝试使用this jQuery插件称为js-tables。这不仅支持过滤，还支持排序。