我在上一栏中通过java脚本获得星级评分，
当我更新我的评分时，单击其在数据库中的更新，但不在数据表中。
因此，我无法在最后一栏中搜索或排序更新的数据。
当api要求更新启动时，我需要在数据表中获取更新数据 有解决方案吗这是代码：http://debug.datatables.net/uyidet
$(document).ready(function() {
performanceRatingStar();
$.ajaxSetup({
async : false
});
$('#table_id2').DataTable({
"order" : [ [ 2, "asc" ] ],
"aoColumnDefs" : [ {
"bSortable" : false,
"aTargets" : [2]
} ],
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(2, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group" style="background-color: #ddd !important"><td colspan="15">'+group+'</td></tr>'
);
last = group;
}
} );
}
});
// Setup - add a text input to each footer cell
$('#table_id2 tfoot th')
.each(
function() {
var title = $('#table_id2 thead th')
.eq($(this).index()).text();
if (title == 'First'
|| title == 'Last'
|| title=='GroupName'
|| title == 'Position'
|| title == 'Market'
|| title == 'Performance Rating'
){
$(this)
.html(
'<input type="text" placeholder="Search '+title+'" />');
}
});
// DataTable
var table = $('#table_id2').DataTable();
// Apply the search
table.columns().eq(0).each(function(colIdx) {
$('input',table.column(colIdx).footer()).on(
'keyup',function() {
table.column(colIdx).search(this.value).draw();
});
});
// Order by the grouping
$('#table_id2').on( 'click', 'tr.group', function () {
var currentOrder = table.order()[0];
if ( currentOrder[0] === 2 && currentOrder[1] === 'asc' ) {
table.order( [ 2, 'desc' ] ).draw();
}
else {
table.order( [ 2, 'asc' ] ).draw();
}
} );
});
function performanceRatingStar(){
$(".rateYo").each(function(e)
{
var rateYoDivId = this.id;
var rosterId_userId_fields = rateYoDivId.split(/_/);
var rosterId = rosterId_userId_fields[0];
var replaceRosterId = rosterId.replace("rateYo", "");
var userId = rosterId_userId_fields[1];
var rateFromHiddenField = $('#hiddenRating'+replaceRosterId+"_"+userId).val();
var pubId = $(this).attr('data-showPubPosiId');
var uId = $(this).attr('data-userId');
$(this).rateYo({
onSet: function(rating, rateYoInstance)
{
getRate = rateFromHiddenField;
},
onChange: function (rating, rateYoInstance) {
if(rating == 0){
$(this).next().text("Not Rated")
}else if (rating == 1){
$(this).next().text("Poor Performance");
}else if (rating == 2){
$(this).next().text("Needs Improvement");
}else if (rating == 3){
$(this).next().text("Solid Performance");
}else if (rating == 4){
$(this).next().text("Exceeded Expectations");
}else if (rating == 5){
$(this).next().text("Best In Class");
}
},
starWidth: "20px",
numStars: 5,
fullStar: true
});
if(getRate == 0){
$("#ratingStatus"+replaceRosterId).text("Not Rated")
}else if (getRate == 1){
$("#ratingStatus"+replaceRosterId).text("Poor Performance");
}else if (getRate == 2){
$("#ratingStatus"+replaceRosterId).text("Needs Improvement");
}else if (getRate == 3){
$("#ratingStatus"+replaceRosterId).text("Solid Performance");
}else if (getRate == 4){
$("#ratingStatus"+replaceRosterId).text("Exceeded Expectations");
}else if (getRate == 5){
$("#ratingStatus"+replaceRosterId).text("Best In Class");
}
$("#"+rateYoDivId).rateYo("rating", rateFromHiddenField);
$("#"+rateYoDivId ).mouseover(function() {
var maxValue = $("#"+rateYoDivId).rateYo("option", "rating");
});
});
$(".rateYo").rateYo().on("rateyo.set", function (e, data)
{
var pubId1 = $(this).attr('data-showPubPosiId');
var uId1 = $(this).attr('data-userId');
$.ajax({
url : "api/users/saveOrUpdateRating/"+data.rating+"/"+pubId1+"/"+uId1,
contentType : "application/json",
success : function(response)
{
count++;
}
});
});
}<table class=" " id="table_id2">
<thead>
<tr>
<th class="">First</th>
<th>Last</th>
<th>Position</th>
<th>Market</th>
<th>Performance Rating</th>
</tr>
</thead>
<tfoot>
<tr>
<th class="">First</th>
<th>Last</th>
<th>Position</th>
<th>Market</th>
<th>Performance Rating</th>
</tr>
</tfoot>
<tbody>
<span th:text="|${roster.firstName}|"></span>
</td>
<td th:text="${roster.lastName}" class="lastName"
th:attr="id='fnameId'+${roster.lastName}"></td>
<span style="float: right">Supervisor :
<span th:text="${roster.supervisorName}"></span></span></td>
<td th:text="${roster.positions}" class="positions"
th:attr="id='fnameId'+${roster.positions}"></td>
<td class="state" th:attr="id='fnameId'+${roster.state}"><span th:text="${roster.stateCode}"></span></td>
<td class="initialRating"><input type="hidden" th:attr="id='hiddenRating'+${roster.showPubPosiId}+'_'+${roster.userId},data-showPubPosiId=${roster.showPubPosiId},data-userId=${roster.userId}" onclick="ratingData(this)" th:value="${roster.perforRating}" />
<a href="#!" class="rateYo" th:attr="id='rateYo'+${roster.showPubPosiId}+'_'+${roster.userId},data-showPubPosiId=${roster.showPubPosiId},data-userId=${roster.userId}"
style="width: 120px; float: left;" />
<div style="color: #666; float: left; margin-left: 7px; margin-top: 3px; width: 150px;"
th:attr="id='ratingStatus'+${roster.showPubPosiId}"></div>
<div th:attr="id='ratingOnChange'+${roster.showPubPosiId}"></div></td>
</tr>
</tbody>
</table>
答案 0 :(得分：1)
您似乎正在尝试使用以下声明更新列：
$(this).next().text("Not Rated");
要更新数据以便DataTables插件知道它已更改，您必须使用其cell().data()功能，然后执行draw()此操作以在浏览器上显示。
我还强烈建议将变量应用于dataTable，以便更轻松地使用它：
var myDataTable = $('#table_id2').DataTable({ /* ... skipped ... */ });
myDataTable.cell($(this).next()).data("Not Rated").draw();