数据表单元格值仅在刷新页面时更新

时间:2015-09-18 11:34:26

标签: javascript datatables

我在上一栏中通过java脚本获得星级评分,

  1. 当我更新我的评分时,单击其在数据库中的更新,但不在数据表中。

  2. 因此,我无法在最后一栏中搜索或排序更新的数据。

  3. 当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++; 
    				 }
    				 });	
    		});
    }
    &#13;
    <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>
       
    &#13;
    &#13;
    &#13;

1 个答案:

答案 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();