jQuery allow me to Table filter
Hi I am wondering how I use this plugin with my table, as I have my table layout differently to how they have theres.
I use the following table layout
<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>
While they use
<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>
The plugin is http://dotbotdesign.com/tutorials/tableFilter/
basically I need to be able to filter the my table. the way there plugin allows.
Just to add to the mystery it seems that there has to be a jquery error somewhere, but I cant see it, as when i do this all as html code it works fine.
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 = 'te开发者_运维技巧xt/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');
}
You can try with this jQuery plugin is called js-tables. That's support not only filter but also sorting.
精彩评论