Question about having two tables that adds and removes data from each table

rdb

So I have an application that has two tables. The first one has data in it, along with an Add button. When it is clicked it then adds that data to the second table on the right. On the second table if you click remove it then places the data back into the table on the left.

Code

$(document).ready(function() {

        var catalogueSearch;
        var noResultsFound = false;
        var oldSearch = 0;

        var selectedContractsTable = $('.catalogueLinkedContractsTable').DataTable({
            "sDom": 't<"dt-panelfooter clearfix"ip>',
            "bSort": false,
            "bLengthChange": false,
            "bSearch": true,
            "paging": false,
            "searching": true,
            "order": [[2, "asc"]],
            "language": {
                "emptyTable": "No linked contracts found.",
                "zeroRecords": "No linked contracts found.",
                "info": "_START_ to _END_ of _TOTAL_"
                },
            "columnDefs": [
                {
                    "targets": [0],
                    "visible": false
                },
                {
                    "targets": [2],
                    "sClass": "hidden-xs hidden-sm"
                },
                {
                    "targets": [3,4],
                    "sClass": "hidden-xs",
                },
                {
                    "data": null,
                    "targets": [5],
                    "sClass": "updateTableRow text-center",
                    "defaultContent": "<button class=\"btn btn-danger br2 btn-xs fs12 table-btn\" id=\"AddContractBtn\">Remove</button>"
                }
            ]
        });

        var contractsTable = $('.catalogueContractsTable').DataTable({
            "sDom": 't<"dt-panelfooter clearfix"ip>',
            "bSort": false,
            "bLengthChange": false,
            "bSearch": true,
            "paging": false,
            "searching": true,
            "order": [[2, "asc"]],
            "language": {
                "emptyTable": "No contracts found.",
                "zeroRecords": "No contracts found.",
                "info": "_START_ to _END_ of _TOTAL_"
            },
            "columnDefs": [
                {
                    "targets": [0],
                    "visible": false
                },
                {
                    "targets": [2],
                    "sClass": "hidden-xs hidden-sm"
                },
                {
                    "targets": [3,4],
                    "sClass": "hidden-xs"
                },
                {
                    "data": null,
                    "targets": [5],
                    "sClass": "updateTableRow text-center",
                    "defaultContent": "<button class=\"btn btn-success br2 btn-xs fs12 table-btn\" id=\"AddContractBtn\">Add</button>"
                }
            ]
        });

I am using this for my Search:

$('input#tableSearch').on('keyup', function () {
var searchTerm = this;

            var tableApi = myTable.api();
            table
                .columns(3)
                .search(this.value)
                .draw();
        });

Is there any reason why the search is not working as expected?

kthorngren

Is there any reason why the search is not working as expected?

Maybe you can describe this in more detail?

How are you moving the data between the tables? Are you using Datatables APIs like rows.add()?

Kevin