如何在一个html页面中使用两个或更多小表插件？我为每个表创建了一个单独的php文件但是当我在主页中包含.php文件时，唯一的工作表是第一个。
第一个例子
<link rel="stylesheet" href="../javascript/tinytable2/style.css"/>
<div id="tablewrapper">
<div id="tableheader">
<div class="search">
<select id="columns_areaLeader" onchange="sorter.search('query_areaLeader')"></select>
<input type="text" id="query_areaLeader" onkeyup="sorter.search('query_areaLeader')" />
</div>
<span class="details">
<div>Records <span id="startrecord_areaLeader"></span>-<span id="endrecord_areaLeader"></span> of <span id="totalrecords_areaLeader"></span></div>
<div><a href="javascript:sorter.reset()">reset</a></div>
</span>
</div>
<table cellspacing='0' id='table_areaLeader' cellpadding='0' class='tinytable'></table>
<div id="tablefooter">
<div id="tablenav_areaLeader">
<div>
</div>
<div>
<select id="pagedropdown_areaLeader"></select>
</div>
<div>
<a href="javascript:sorter.showall()">view all</a>
</div>
</div>
<div id="tablelocation">
<div>
<select onchange="sorter.size(this.value)">
<option value="5">5</option>
<option value="10" selected="selected">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span>Entries Per Page</span>
</div>
<div class="page">Page <span id="currentpage_areaLeader"></span> of <span id="totalpages_areaLeader"></span></div>
</div>
</div>
<script type="text/javascript">
var sorter = new TINY.table.sorter('sorter','table_areaLeader',{
headclass:'head',
ascclass:'asc',
descclass:'desc',
evenclass:'evenrow',
oddclass:'oddrow',
evenselclass:'evenselected',
oddselclass:'oddselected',
paginate:true,
size:10,
colddid:'columns_areaLeader',
currentid:'currentpage_areaLeader',
totalid:'totalpages_areaLeader',
startingrecid:'startrecord_areaLeader',
endingrecid:'endrecord_areaLeader',
totalrecid:'totalrecords_areaLeader',
hoverid:'selectedrow_areaLeader',
pageddid:'pagedropdown_areaLeader',
navid:'tablenav_areaLeader',
sortcolumn:1,
sortdir:1,
sum:[8],
avg:[6,7,8,9],
columns:[{index:7, format:'%', decimals:1},{index:8, format:'$', decimals:0}],
init:true
});
</script>
第二个例子
记录 - 重启 查看全部 五 10 20 50 100 每页条目 的页面
<script type="text/javascript" src="../javascript/tinytable/script.js"></script>
<script type="text/javascript">
var sorter = new TINY.table.sorter('sorter','table_parishPriest',{
headclass:'head',
ascclass:'asc',
descclass:'desc',
evenclass:'evenrow',
oddclass:'oddrow',
evenselclass:'evenselected',
oddselclass:'oddselected',
paginate:true,
size:10,
colddid:'columns_parishPriest',
currentid:'currentpage_parishPriest',
totalid:'totalpages_parishPriest',
startingrecid:'startrecord_parishPriest',
endingrecid:'endrecord_parishPriest',
totalrecid:'totalrecords_parishPriest',
hoverid:'selectedrow',
pageddid:'pagedropdown_parishPriest',
navid:'tablenav',
sortcolumn:1,
sortdir:1,
sum:[8],
avg:[6,7,8,9],
columns:[{index:7, format:'%', decimals:1},{index:8, format:'$', decimals:0}],
init:true
});
</script>
答案 0 :(得分：0)
rename id's for second table n wrapper, plus the css
in the second table, user .sorter2() calls
e.g.
var sorter2;
var sorter;
function initSorter(){
sorter = new TINY.table.sorter('sorter','table',{
headclass:'head',
ascclass:'asc',
descclass:'desc',
evenclass:'evenrow',
oddclass:'oddrow',
evenselclass:'evenselected',
oddselclass:'oddselected',
paginate:true,
size:10,
colddid:'columns',
currentid:'currentpage',
totalid:'totalpages',
startingrecid:'startrecord',
endingrecid:'endrecord',
totalrecid:'totalrecords',
hoverid:'selectedrow',
pageddid:'pagedropdown',
navid:'tablenav',
sortcolumn:1,
sortdir:1,
sum:[8],
avg:[6,7,8,9],
columns:[{
index:7,
format:'%',
decimals:1
},{
index:8,
format:'$',
decimals:0
}],
init:true
});
}
//idNo for new table
function initSorterTableIdPlusNo(tableid, idNo){
sorter2 = new TINY.table.sorter('sorter2', tableid,{
headclass:'head',
ascclass:'asc',
descclass:'desc',
evenclass:'evenrow',
oddclass:'oddrow',
evenselclass:'evenselected',
oddselclass:'oddselected',
paginate:true,
size:10,
colddid:'columns'+idNo,
currentid:'currentpage'+idNo,
totalid:'totalpages'+idNo,
startingrecid:'startrecord'+idNo,
endingrecid:'endrecord'+idNo,
totalrecid:'totalrecords'+idNo,
hoverid:'selectedrow'+idNo,
pageddid:'pagedropdown'+idNo,
navid:'tablenav'+idNo,
sortcolumn:1,
sortdir:1,
init:true
});
}
<div style="width: 90%" id="tablewrapper2">
<font color="blue">Un-ticked Supplier(s) will be removed</font>
<div id="tableheader2">
<div class="search">
<select id="columns2" onchange="sorter2.search('query2')"></select>
<input style="width: 150px" type="text" id="query2" onkeyup="sorter2.search('query2')" />
</div>
<span class="details">
<div>Records <span id="startrecord2"></span>-<span id="endrecord2"></span> of <span id="totalrecords2"></span></div>
<div><a href="javascript:sorter2.reset()">reset</a></div>
</span>
</div>
<table width="80%" cellpadding="0" cellspacing="0" border="0" id="table2" class="tinytable">
<thead>
<tr bgcolor="#CCCCCC">
<th width="6%" scope="col"><h3>No.</h3></th>
<th width="55%" scope="col"><h3>Supplier Name</h3></th>
<th class="nosort" width="14%" scope="col"><h3></h3></th>
</tr>
</thead>
<tbody>
<c:forEach items="${model.supplierslList}" var="supplier" varStatus="status">
<tr>
<td>
${status.count}<input name="count" value="${model.supplierSize}" type="hidden"/>
</td>
<td>
${supplier.facilityunit.facilityunitname}<input name="facilityid" value="${model.facilityid}" type="hidden"/>
</td>
<td>
<input type="hidden" name="supplieridHidden${status.count}" value="${supplier.supplierid}"/>
<input checked type="checkbox" onclick="this.value=0" name="supplierid${status.count}" value="${supplier.supplierid}"/>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<div id="tablefooter2">
<div id="tablenav2">
<div>
<img src="static/images/pager/first.gif" width="16" height="16" alt="First Page" onclick="sorter2.move(-1,true)" />
<img src="static/images/pager/previous.gif" width="16" height="16" alt="Previous Page" onclick="sorter2.move(-1)" />
<img src="static/images/pager/next.gif" width="16" height="16" alt="Next Page" onclick="sorter2.move(1)" />
<img src="static/images/pager/last.gif" width="16" height="16" alt="Last Page" onclick="sorter2.move(1,true)" />
</div>
<div>
<select style="width: 60px" id="pagedropdown2"></select>
</div>
<div>
<a onclick="$('#users').attr('height', 'auto'); $('#tabcontent').attr('height', 'auto');" href="javascript:sorter2.showall()">view all</a>
</div>
</div>
<div id="tablelocation2">
<div>
<select style="width: 60px" onchange="sorter2.size(this.value)">
<option value="5">5</option>
<option value="10" selected="selected">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span>Entries Per Page</span>
</div>
<div class="page">Page <span id="currentpage2"></span> of <span id="totalpages2"></span></div>
</div>
</div>
<table style="width: 60%" align="center">
<tr><td colspan="2"> </td></tr>
<tr>
<td><div id="errormsg"></div>
<input class="RoundButton" type="button" name="b1" value="Remove Intenal Supplier" onClick ="
ajaxSubmitData('removeInternalSuppliers.htm', 'assignDIV', $('#unAssignSupplier').serialize(), 'POST');"/>
</td>
<td>
<input class="RoundButton" name="cancel" type="reset" id="cancel" value="Refresh" />
</td>
</tr>
</table>
</div>