Javascript分頁

有人可以幫我嗎？我對JS有一點認識......我試過 this的例子，那個brianpeiris寫道..它工作的很好，但我需要在同一頁面有兩個不同的尋呼機。我怎樣才能做到這一點？Javascript分頁

此代碼不能正常工作，但是這是我在多大程度上得到了..

<script type="text/javascript"> 
        var pagination_options = { 
         num_edge_entries: 1, 
         num_display_entries: 8, 
         callback: pageselectCallback, 
         items_per_page:1 
        } 
        function pageselectCallback(page_index, jq){ 
         var items_per_page = pagination_options.items_per_page; 
         var offset = page_index * items_per_page; 
         var new_content = $('#hiddenresult div.result').slice(offset, offset + items_per_page).clone(); 
         $('#Searchresult').empty().append(new_content); 


         var items_per_page = pagination_options.items_per_page; 
         var offset = page_index * items_per_page; 
         var new_content = $('#hiddenresult2 div.result2').slice(offset, offset + items_per_page).clone(); 
         $('#Searchresult2').empty().append(new_content); 
         return false; 

        } 


        function initPagination() { 
         var num_entries = $('#hiddenresult div.result').length; 
         // Create pagination element 
         $("#Pagination").pagination(num_entries, pagination_options); 

         num_entries = $('#hiddenresult2 div.result2').length; 
         // Create pagination element 
         $("#Pagination2").pagination(num_entries, pagination_options);       
        } 


        $(document).ready(function(){  
         initPagination(); 
        });

來源

2010-09-01 artur

試試這個：

var pagination_options = { 
    num_edge_entries: 2, 
    num_display_entries: 8, 
    callback: pageselectCallback, 
    items_per_page:3 
}; 
var pagination_options2 = { 
    num_edge_entries: 2, 
    num_display_entries: 8, 
    callback: pageselectCallback2, 
    items_per_page:3 
}; 
function pageselectCallback(page_index, jq){ 
    var items_per_page = pagination_options.items_per_page; 
    var offset = page_index * items_per_page; 
    var new_content = $('#hiddenresult div.result').slice(offset, offset + items_per_page).clone(); 
    $('#Searchresult').empty().append(new_content); 
    return false; 
} 
function pageselectCallback2(page_index, jq){ 
    var items_per_page = pagination_options2.items_per_page; 
    var offset = page_index * items_per_page; 
    var new_content = $('#hiddenresult2 div.result').slice(offset, offset + items_per_page).clone(); 
    $('#Searchresult2').empty().append(new_content); 
    return false; 
} 

function initPagination() { 
    var num_entries = $('#hiddenresult div.result').length; 
    // Create pagination element 
    $("#Pagination").pagination(num_entries, pagination_options); 

    num_entries = $('#hiddenresult2 div.result').length; 
    // Create pagination element 
    $("#Pagination2").pagination(num_entries, pagination_options2) 
} 

    $(document).ready(function(){  
     initPagination(); 
    });

來源

2010-09-01 10:30:06

非常感謝！你救了我的一天！ P.S. 我剛剛在第二個分頁器中將'div.result'更改爲'div.result2' – artur 2010-09-01 10:41:55

https://plnkr.co/edit/XFqbVuIa0Sn4rRvE7d0J?p=preview

<head> 
    <script data-require="[email protected]*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    <style> 
     #footer{ 

     height: 19px; 
     color: light-green; 
     color: blueviolet; 
     background-color: darkcyan; 
     padding: 16px; 
     } 
     .inputboxwidth{ 
     width:16px; 
     } 
     #blackColr{ 
     color:black; 
     } 
     #alignRight{ 
      text-align: right; 
      margin-right:36px; 
     } 
     td{ 
      border: 0px; 
      padding: 6px;  
      width: 10%; 
     } 
    </style> 
    </head> 

    <body> 
    <table border="1" padding="36px"> 
     <thead> 
     <tr> 
      <td>Sno</td> 
      <td>Name</td> 
      <td>RollNO</td> 
      <td>Class</td> 
     </tr> 
     </thead> 
     <tbody></tbody> 
    </table> 
    <div id="footer"> 
     <div id="alignRight"> 
     <input type="text" class="inputboxwidth" id="pageNo" name="pageNo" value=""/> 
     <span id="blackColr">/</span> 
     <input type="text" class="inputboxwidth" id="TotalPageno" name="TotalPageno" disabled=disabled value=""/> 
     </div> 
    </div> 

    <script> 

     $("input#pageNo").change(function() { 
     //console.log("innnnnnnn") 

     var pageno=$(this).val(); 

      var isnum = /^\d+$/.test(pageno); 

     if(pageno>countRecor || !isnum){ 
     $("input#pageNo").val(previousPage); 
     pageno=previousPage 
     } 
     var gotorecor=dispRecor*pageno-5; 
     var body1=$("tbody"); 
     $("tbody").text("") 
     var temp=[]; 
     for(i=gotorecor;i<=gotorecor+4;i++){ 
      temp.push(data[i]); 
     } 
     makeData(gotorecor,gotorecor+4,temp); 
     }); 

     function makeData(startingRecordNumber,dispRecor,data){ 
     previousPage=$("input#pageNo").val(); 
      var body=$("tbody"); 
      var count=0; 
      EndingRecordNumber=dispRecor 
      $.each(data, function(rowIndex, r) { 
      count++; 
      if(count==6){ 
       return false; 
      } 
     var row = $("<tr/>"); 
     $.each(r, function(colIndex, c) { 
      row.append($("<td/>").text(c)); 
     }); 
     body.append(row); 
     }); 
     } 

     $(document).ready(function() { 
     $("#pageNo").val("1"); 
      data = [ 
       ["1","New York", "LA", "Seattle"], 
       ["2","Paris", "Milan", "Rome"], 
       ["3","Pittsburg", "Wichita", "Boise"], 
         ["4","New York", "LA", "Seattle"], 
         ["5","New York", "LA", "Seattle"], 
         ["6","New York", "LA", "Seattle"], 
         ["7","New York", "LA", "Seattle"], 
         ["8","New York", "LA", "Seattle"], 
         ["9","New York", "LA", "Seattle"], 
         ["10","New York", "LA", "Seattle"], 
         ["11","New York", "LA", "Seattle"], 
         ["12","New York", "LA", "Seattle"], 
         ["13","New York", "LA", "Seattle"], 
         ["14","New York", "LA", "Seattle"], 
         ["15","New York", "LA", "Seattle"], 
          ["16","New York", "LA", "Seattle"]] 
     countRecor=Math.ceil(data.length/5); 
     dispRecor=5; 
     $("#TotalPageno").val(countRecor); 

     makeData(0,dispRecor,data); 
     }); 
    </script> 
    </body> 

</html>

來源

2016-03-05 06:21:56 javabrainer

回答

相關問題