Two datatables on same page with same datasource

Satish_Lakhani

Hello,

I'm having two different datatables on single page.
Both is having same datasource.

Both loading data properly, but the issue is that while i'm filtering second datatable it filters first datatable rather second one.

Please help me.

Following is my code for both datatables:

var oTable, sequencedTable; $(function () { aSelected = $('#id_psf-samples').val(); aSelected = (aSelected == null) ? [] : aSelected.map(Number); oTable = $('table#samples').dataTable({ iDisplayLength: 50, "sScrollX": "100%", "oLanguage": { "sInfoFiltered": "" }, "aoColumnDefs": [{ "aTargets": [0], "bSortable": false, "fnRender": function (oData, data) { return ""; } }, ], "aaSorting": [ [1, "desc"] ], "bServerSide": true, "sAjaxSource": "{% url libprep.views.prep_sample_browse_data %}", "fnServerParams": function (aoData) { aoData.push({ "name": "showNotBeenProcessed", "value": $('#onlyNotBeenProcessed').is(":checked") }); }, "fnRowCallback": function (nRow, aData, iDisplayIndex) { var id = parseInt($("input", nRow).val()); if ($.inArray(id, aSelected) !== -1) { $(nRow).addClass('row_selected'); $("input", nRow).attr("checked", true); } }, "fnDrawCallback": function (oSettings) { $("input[name='checkAll']").attr("checked", false); $("input[type='checkbox'][name='sample_id']").change(function () { var id = parseInt($(this).val()); var index = $.inArray(id, aSelected); if (index === -1 || $(this).is(":checked")) { $(this).parent().parent().addClass('row_selected'); aSelected.push(id); } else { $(this).parent().parent().removeClass('row_selected'); aSelected.splice(index, 1); } }); } }); sequencedTable = $('table#seq-samples').dataTable({ iDisplayLength: 50, "oLanguage": { "sInfoFiltered": "" }, "aaSorting": [ [2, "asc"] ], "bServerSide": true, "bProcessing": true, "sAjaxSource": "{% url libprep.views.prep_sample_browse_data %}", "fnServerParams": function (aoData) { aoData.push({ "name": "sequencedSample", "value": "true" }); }, "aoColumnDefs": [{ "aTargets": [0], "bSortable": false, "fnRender": function (oData, data) { return ""; } }, ], "fnRowCallback": function (nRow, aData, iDisplayIndex) { var id = parseInt($("input", nRow).val()); if ($.inArray(id, aSelected) !== -1) { $(nRow).addClass('row_selected'); $("input", nRow).attr("checked", true); } }, "fnDrawCallback": function (oSettings) { $("input[type='checkbox'][name='sample_id']").change(function () { var id = parseInt($(this).val()); var index = $.inArray(id, aSelected); if (index === -1 || $(this).is(":checked")) { $(this).parent().parent().addClass('row_selected'); aSelected.push(id); } else { $(this).parent().parent().removeClass('row_selected'); aSelected.splice(index, 1); } }); } }); $('form').submit(function () { if (aSelected.length == 0) { alert("Please select samples"); return false; } $('#id_psf-samples').val(aSelected); }); $("#onlyNotBeenProcessed").change(function () { oTable.fnDraw(true); }) $("input[name='checkAll']").change(function () { $("input[type='checkbox'][name='sample_id']").attr("checked", $(this).is(":checked")).change(); }); $(document).on($.modal.CLOSE, function () { $('#seq-samples input:checked').attr('checked', false); $('#seq-samples').find('.row_selected').removeClass('row_selected'); }) $('#addSample').click(function (e) { resequenceSample(); }) function resequenceSample() { var sTable = $('table#seq-samples').dataTable(); var ids = sTable.$("tr.row_selected").map(function () { return $(sTable.fnGetData(this, 0)).val() }).toArray(); $.ajax({ type: "GET", url: "{% url libprep.views.resequence_sample %}", data: { "sample": JSON.stringify(ids) } }).done(function () { $('table#samples').dataTable().fnDraw(true); $('table#seq-samples').dataTable().fnDraw(true); }); } });