Question

当我第一次初始化datatable时，像click，higlight行这样的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。数据加载正常，但jQuery选择器和与datable的交互丢失了，我一直在尝试各种方法，但无法开始工作。

我想知道为什么简单的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实例化新数据表。有用。

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

3 个答案: