2013-12-20 44 views
2

發行工作是我動態地添加內容到一個表,並使用武力的顏色:數據表內容(Ajax)和行顏色不分頁

$("#main_dash tbody tr:nth-child(" + index + ")").css("background-color", item['color']); 

這工作在第一頁上偉大的,但丟失的任何其他網頁。請讓我知道我能做些什麼。

HTML:

Employee: <input type="text" id="dash_view" name="name"/><br/> 
<div id="dashboard_viewer"> 
<table id="main_dash"> 
<thead> 
<tr class="ui-widget-header"> 
    <th></th> 
    <th>Date</th> 
    <th>Type</th> 
    <th>Regarding</th> 
    <th>Submitted By</th> 
    <th>Review</th> 
    <th>Assign</th> 
</tr> 
</thead> 
<tbody> 
</tbody> 
</table> 
</div> 

JS:

var mainTable = $("#main_dash").dataTable({ 
    "oLanguage": { 
     "sEmptyTable": "There are currently no groom logs to be assigned.", 
    }, 
    "sPaginationType": "full_numbers", 
    "iDisplayLength": 10, 
    "aaSorting": [ 
     [1, "asc"] 
    ], 
}); 

$("#dash_view").autocomplete({ 
    source: '/process/get_users.php', 
    minLength: 2, 
    select: function (event, ui) { 
     var name = ui.item.value; 
     var uid = ui.item.id; 
     var query = "func=dash_view&uid=" + uid; 
     ajaxRequest(query, function (data) { 
      $("h3").text(name + "'s Dashboard"); 
      mainTable.fnClearTable(0); 
      mainTable.fnDraw(); 
      data = $.parseJSON(data); 
      $.each(data, function (i, item) { 
       var index = mainTable.fnAddData([ 
        item['flagged'], 
        item['date'], 
        item['type'], 
        item['regarding'], 
        item['submitted'], 
        "<button class='button button-blue review_item'>Review</button>", 
        '<span class="groom_id hidden">' + item['groom_id'] + '</span><input type="text" class="user_list"/>', 
       ]); 
       ++index; 
       $("#main_dash tbody tr:nth-child(" + index + ")").css("background-color", item['color']); 
      }); 
      $("#dashboard_viewer").show("slide", { 
       direction: "up" 
      }, 1000); 
      $(".user_list").autocomplete({ 
       source: '/process/get_users_access.php', 
       minLength: 2, 
       select: function (event, ui) { 
        var row = $(this).closest('tr')[0]; 
        var groom = $(this).parent().children("span:first").text(); 
        var name = ui.item.value; 
        var aid = $("#aid").text(); 
        mainTable.fnDeleteRow(row); 
        var query = "func=assign_groom&groom_id=" + groom + "&name=" + name + "&aid=" + aid; 
        ajaxRequest(query, function (data) { 
         successMsg('Assigned groom ' + groom + ' to ' + name); 
        }); 
       } 
      }); 
     }); 
    }, 
}); 

回答

1

我知道這是一個老問題,但我想離開我的答案至少FTR:

由於內容是動態的,顏色變化是靜態的,只要你提到一次就可以工作。一種可能的解決方案是將顏色更改操作放置在DataTable Event Listener內,以便在發生該事件時執行顏色更改線。

在這種情況下,你可以嘗試用draw event

$('#main_dash').on('draw.dt', function() { 
    $("#main_dash tbody tr:nth-child(" + index + ")").css("background-color", item['color']); 
});