重新加载新数据后数据表失去交互性和样式

Question

当我第一次初始化数据表时，像 click、highlight 行这样的 jQuery 选择器可以正常工作。

    oTable = jQuery('.zebra').dataTable( {
    "bFilter": false,
    "iDisplayLength": 25,
    "aLengthMenu": [[25], [25]],
    "bProcessing": true,
    "bJQueryUI": true,
    "aaData": ${subscriptions},
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
           jQuery(nRow).attr("id",iDisplayIndex);           
           jQuery("#pointSlider", nRow).spinner();
           jQuery(".save").button();
           return nRow;
    },
    "aoColumns": [
                 {"mData":"user_id", "bSortable": false},
                 {"mData":"subscription_id", "bSortable": false},
                 {"mData":"user_name", "bSortable": false},
                 {"mData":"subscription_frequency", "bSortable": false},
                 {"mData":"subscription_price", "bSortable": false},
                 {"mData":"kamuer_first_name", "bSortable": false, "sDefaultContent": null},
                 {"mData":"kamuer_username", "bSortable": false, "sDefaultContent": null},
                 {"mData":"points_user", "bSortable": false, "sDefaultContent": null, 
                     "mRender": function (data, type, full){
                                return '<input id="pointSlider" value= "' + data +'" type="number" min="0" step ="1"/>';
                     },
                     },
                 {"mData":"save", "bSortable": false, "sDefaultContent": null, 
                         "mRender": function (data, type, full){ 
                            return '<img class="save" src="${applicationScope.contextURL}/rsrc/images/results/Green_Check.png" width="20px" title="Save this record" />';   
                         }
                         }
                 ]
});


jQuery(".zebra tbody tr").on('click', function(e) {
    if ( $(this).hasClass('row_selected') ) {
         $(this).removeClass('row_selected');
    }
    else {
        oTable.$('tr.row_selected').removeClass('row_selected');
        var aData = oTable.fnGetData(this);
         $(this).addClass('row_selected');
    }
});

jQuery(".save").on('click', function (e) {
     var userId =   jQuery(this).closest('tr').find('td').eq(0).html();
     var subscriptionId = jQuery(this).closest('tr').find('td').eq(1).html();
     var points =   jQuery(this).closest('tr').find('#pointSlider').val();

     var baseURL = "<%= request.getContextPath()%>/commission/updateCommission";
     var data = "userId=" + userId + "&subscriptionId=" + subscriptionId + "&points=" +points;
     var URL = baseURL;

    jQuery.ajax({
          type: 'POST',
          url: URL,
          data: data,
          success: alert ("done")

    });

});

jQuery("#subscriptions_search").click(function (e) {
    var startDate = jQuery("#startDate").val();
    var endDate = jQuery("#endDate").val();
    var baseURL = "<%= request.getContextPath()%>/commission/getSubscriptions";
    var data = "startDate=" + startDate + "&endDate=" + endDate;
    var URL = baseURL;

    jQuery.ajax({
        type:'GET',
        url: URL,
        data: data,
        success: function (data) {
            refreshTable(data);
        }
    });
});

function fnGetSelected( oTableLocal )
{
    return oTableLocal.$('tr.row_selected');
}

function refreshTable(json)
{

   oSettings = oTable.fnSettings();

   oTable.fnClearTable(this);

   oTable.fnAddData(json.subscriptions);
   oTable.fnDraw();

}

当用户需要更改数据时调用 refreshTable。数据加载正常，hpwever jQuery 选择器和与数据表的交互丢失，我一直在尝试各种方法但无法开始工作。

我想知道为什么一个简单的 jQuery 选择器在数据重新加载后无法工作？在这里感谢任何帮助。

Answer 1

我认为您此时正在重新定义一个新表：

table = jQuery(".zebra").dataTable();

所以你应该在调用它之前获取你的配置。 如果您周围没有其他数据表，您可以将您的设置定义为默认值。

$.extend( $.fn.dataTable.defaults, {
    // your settings
});

见https://datatables.net/examples/advanced_init/defaults.html

Answer 2

看看这篇文章： Change settings value on the fly?

我认为您可以将您的设置定义为一个对象并将其传递给 dataTable 构造函数。

更新：

我创建了一个 JSFiddle 来尝试它，它可以处理假数据，就像你一开始写的一样。 我刚刚在 $(document).ready 中创建了 dataTable 元素，如下所示：

var oTable;

$(document).ready(function(){
    oTable = jQuery('#mytable').dataTable({
    ...
});

看看这里http://jsfiddle.net/jpreynat/j40jo2dc/5/

希望这会有所帮助。

Answer 3

放弃此方法并使用 bDestroy:true 实例化一个新数据表。有用。