如何使用jQuery更新表格

我試圖根據從返回JSON對象的ajax請求接收到的輸入動態更新下面的html表格的行。如何使用jQuery更新表格

如果我得到多個json對象，則將其打印到網頁上會成爲問題。在這種情況下，我正在尋找可能的最佳解決方案來使用jQuery動態更新我的表格？例如，如果我得到10個對象，我只想顯示5，其餘的可能是下一頁的鏈接？有人能指導我該看什麼？

jQuery的阿賈克斯

<script> 
     $.ajax({ 
      url: 'http://localhost/getData/USSOUTH/', 
      async: false, 
      dataType: 'json', 
      success: function(data) { 

       for (var i in data) { 

        var USERNAME = data[i].USERNAME; 
        var EMAIL = data[i].EMAIL; 
        var PASSWORD = data[i].PASSWORD; 
        var ACTIVE = data[i].ACTIVE; 

       } 
      } 
     }); 
</script>

HTML BODY

<body> 

<div class="wrapper"> 

    <div class="table"> 

    <div class="row header blue"> 
     <div class="cell"> 
     Username 
     </div> 
     <div class="cell"> 
     Email 
     </div> 
     <div class="cell"> 
     Password 
     </div> 
     <div class="cell"> 
     Active 
     </div> 
    </div> 

    <div class="row"> 
     <div class="cell"> 
     ninjalug 
     </div> 
     <div class="cell"> 
     [email protected] 
     </div> 
     <div class="cell"> 
     ************ 
     </div> 
     <div class="cell"> 
     Yes 
     </div> 
    </div> 

    </div> 

</div> 

</body>

來源

2015-01-20 user3846091

如果你只是想在未來5項，爲什麼不包括在請求參數，並讓它只返回那些？或者全部添加它們，但隱藏最後5個，幷包含一個按鈕以顯示它們？ – 2015-01-20 21:05:28

我祈禱你已經醃製並散列了純文本密碼。 – Terry 2015-01-21 00:57:25

我還挺簡單的代碼，但你會得到的要點，並可以修改它與您的特定代碼申請（和我不能做JSON與代碼片段，所以我模擬了一個數組變量jsonData）

$(document).ready(function() { 
 
    var jsonData = [ 
 
     { 'name': 'name2', 'email':'email2', 'content':'content2' }, 
 
     { 'name': 'name3', 'email':'email3', 'content':'content3' }, 
 
     { 'name': 'name4', 'email':'email4', 'content':'content4' }, 
 
     { 'name': 'name5', 'email':'email5', 'content':'content5' }, 
 
     { 'name': 'name6', 'email':'email6', 'content':'content6' }, 
 
     { 'name': 'name7', 'email':'email7', 'content':'content7' }, 
 
     { 'name': 'name8', 'email':'email8', 'content':'content8' } 
 
    ]; 
 
    $('.add').on('click', function() { 
 
     console.log('click'); 
 
     var length = jsonData.length; 
 
     if (length > 5) { length = 5; } //limit to 5 
 
     for (var i = 0; i < length; i++) { 
 
      var clone = $('#template').clone(true).attr('id', ''); 
 
      clone.find('.name').html(jsonData[i]['name']); 
 
      clone.find('.email').html(jsonData[i]['email']); 
 
      clone.find('.content').html(jsonData[i]['content']); 
 
      clone.appendTo('table'); 
 
     } 
 
    }); 
 
});

td { 
 
    border:1px solid black; 
 
    padding:2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<a href="#" class="add">add</a> 
 
<table> 
 
    <tr id="template" class="dataRow"> 
 
     <td class="name">Name1</td> 
 
     <td class="email">Email1</td> 
 
     <td class="content">Content1</td> 
 
    </tr> 
 
</table>

來源

2015-01-20 21:19:26 indubitablee

您的解決方案需要記錄導航的一部分。但一個快速響應。 – MaxZoom 2015-01-21 15:37:31

您可以檢查AJAX服務文檔是否支持分頁，這是它的響應將只包含5個記錄和一個指標，還有更多。通過這種方式，您可以按照第一次請求的類似方式請求下一個5條記錄，以便按需要顯示。

如果該服務不支持分頁功能，那麼您可以隱藏前5個以上的任何記錄，並使用屬性style="display: none;"和顯示導航鏈接NEXT &上一個「滾動」結果。

// Data will be replaced with your Json call 
 
var data = [ 
 
    {'username': 'name1', 'email':'email1', 'password':'password1', 'active':'active1' }, 
 
    {'username': 'name2', 'email':'email2', 'password':'password2', 'active':'active2' }, 
 
    {'username': 'name3', 'email':'email3', 'password':'password3', 'active':'active3' }, 
 
    {'username': 'name4', 'email':'email4', 'password':'password4', 'active':'active4' }, 
 
    {'username': 'name5', 'email':'email5', 'password':'password5', 'active':'active5' }, 
 
    {'username': 'name6', 'email':'email6', 'password':'password6', 'active':'active6' }, 
 
    {'username': 'name7', 'email':'email7', 'password':'password7', 'active':'active7' }, 
 
    {'username': 'name8', 'email':'email8', 'password':'password8', 'active':'active8' }, 
 
    {'username': 'name9', 'email':'email9', 'password':'password9', 'active':'active9' }, 
 
    {'username': 'name10','email':'email10','password':'password10','active':'active10'}, 
 
    {'username': 'name11','email':'email11','password':'password11','active':'active11'}, 
 
    {'username': 'name12','email':'email12','password':'password12','active':'active12'} 
 
]; 
 

 
var MAX_ROWS = 5; 
 
var totalRows = 0; 
 
var page = 0; 
 

 
$(document).ready(function() { 
 
    // display first 5 rows 
 
    var $templateRow = $('#templateRow'); 
 
    $.each(data, function(i, obj) { 
 
    var $row = $templateRow.clone().removeAttr('id') 
 
    // copy data 
 
    $row.find('*[data-name]').html(obj.username); 
 
    $row.find('*[data-email]').html(obj.email); 
 
    $row.find('*[data-pass]').html(obj.password); 
 
    $row.find('*[data-active]').html(obj.active); 
 
    $('.table').append($row); 
 
    }); 
 
    // Navigation part 
 
    page = 0; 
 
    totalRows = data.length; 
 
    showRows(); 
 
    displayNext(); 
 

 
    // Navigation handler 
 
    $('*[data-prev-lnk]').on('click', function(e) { 
 
    e.preventDefault(); 
 
    page--; 
 
    displayPrev(); 
 
    displayNext(); 
 
    showRows() 
 
    }); 
 

 
    $('*[data-next-lnk]').on('click', function(e) { 
 
    e.preventDefault(); 
 
    page++; 
 
    displayPrev(); 
 
    displayNext(); 
 
    showRows(); 
 
    }); 
 
}); 
 

 
function displayPrev() { 
 
    if (page > 0) 
 
    $('*[data-prev-lnk]').show(); 
 
    else 
 
    $('*[data-prev-lnk]').hide(); 
 
} 
 

 
function displayNext() { 
 
    var currRow = (page+1) * MAX_ROWS; 
 
    if (currRow >= totalRows) 
 
    $('*[data-next-lnk]').hide(); 
 
    else 
 
    $('*[data-next-lnk]').show(); 
 
} 
 

 
function showRows() { 
 
    var startRow = page * MAX_ROWS; 
 
    var counter = 0; 
 
    $('.row').each(function() { 
 
    if (! ($(this).attr('id') || $(this).hasClass('header'))) { 
 
     if (counter < startRow || counter >= startRow + MAX_ROWS) { 
 
     $(this).hide(); 
 
     } 
 
     else { 
 
     $(this).show(); 
 
     } 
 
     counter++; 
 
    } 
 
    }); 
 
}

div.table {border: 1px solid black; display: table; width: 500px;} 
 
div.row {border: 1px solid black; display: table-row; } 
 
div.cell {border: 1px solid black; display: table-cell; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="table"> 
 
    <div class="row header blue"> 
 
     <div class="cell">Username</div> 
 
     <div class="cell">Email</div> 
 
     <div class="cell">Password</div> 
 
     <div class="cell">Active</div> 
 
    </div> 
 
    <div id="templateRow" class="row" style="display:none;"> 
 
     <div class="cell" data-name=''></div> 
 
     <div class="cell" data-email=''></div> 
 
     <div class="cell" data-pass=''></div> 
 
     <div class="cell" data-active=''></div> 
 
    </div> 
 
    </div> 
 
    <br/><a href='#' data-prev-lnk='' style='display:none'>Previous</a> 
 
    <br/><a href='#' data-next-lnk='' style='display:none'>Next</a> 
 
</div>

來源

2015-01-20 21:25:39 MaxZoom

小提琴演示http://jsfiddle.net/maxZoom/zuaLogq6/5/ – MaxZoom 2015-01-21 01:15:13

讓我們用thead和tbody更好的使用和對下一組結果添加按鈕。

HTML：

<body> 

<div class="wrapper"> 

    <button id ="nextPage" value ="Next page"> 
    <div class="table"> 
    <thead class="row header blue"> 
     <div class="cell"> 
     Username 
     </div> 
     <div class="cell"> 
     Email 
     </div> 
     <div class="cell"> 
     Password 
     </div> 
     <div class="cell"> 
     Active 
     </div> 
    </thead> 

    <tbody> 
    <div class="row"> 
     <div class="cell"> 
     ninjalug 
     </div> 
     <div class="cell"> 
     [email protected] 
     </div> 
     <div class="cell"> 
     ************ 
     </div> 
     <div class="cell"> 
     Yes 
     </div> 
    </div> 
    </tbody> 

    </div> 

</div> 

</body>

在JS分配的功能按鈕，這將顯示未來5所記載：

var results = ""; 
$.ajax({ 
    url: 'http://localhost/getData/USSOUTH/', 
    async: false, 
    dataType: 'json', 
    success: function(data) { 
     results = data; 
     showResults(results); 

    } 
}); 

//function for showing results 
function showResults(data) 
{ 
    var rows = $('tbody .row').length; // get number of already displayed records 
    for (i = rows; i<=from+4,i++;) //add next 5 records 
    { 
     var content = '\ 
      <div class="row">\ 
       <div class="cell">\ 
        '+data[i].USERNAME+'\ 
       </div>\ 
       <div class="cell">\ 
        '+data[i].EMAIL+'\ 
       </div>\ 
       <div class="cell">\ 
        '+data[i].PASSWORD+'\ 
       </div>\ 
       <div class="cell">\ 
        '+data[i].ACTIVE+'\ 
       </div>\ 
      </div>'; 
     $('tbody .row:last').after(content); 
    } 
} 

$("nextPage").click(function(){ 
    showResults(results); 
});

來源

2015-01-20 22:00:55 Johncze

如何使用jQuery更新表格

回答

相關問題