在一個html頁面中有2個或更多個小表格

Question

如何在一個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> 

第二Exapmple

記錄 - 的 復位 視圖所有 項每頁 的

 <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> 

Answer 1

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">&nbsp;</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>