分页数据表搜索第二页的返回结果

时间:2019-01-28 11:52:23

标签: angular datatable

在我的有角度的应用程序中,我正在使用具有以下选项的数据表。

strategyDatatbleOptions = {
    sDom: 'rt<"bottom"p>',
    ajax: (data, callback, settings) => {
      this.strategyDataService.getStrategiesData().subscribe((data) => {
        data = data.json().data;
        if (data == undefined) {
          data = [];
        }
        callback({
          aaData: data,
        })
      })
    },
    columns: [
      {
        data: 'name', 'width': '10%'
      },
      {
        data: 'executor.name', 'width': '10%',
        render: function (data, type, row) {
          if (data) {
            return data
          } else {
            return null;
          }
        }
      },
      {
        data: 'account.brokerId', 'width': '10%'
      },
      {
        data: 'properties', 'width': '15%'
      },
      {
        data: 'capital', 'width': '15%'
      },
      {
        data: 'createTime', 'width': '15%'
      },
      {
        data: 'updateTime', 'width': '15%'
      },
      {
        data: null, 'width': '10%',
        orderable: false,
        className: 'editcenter',
        defaultContent:
          '<a class="clone_save"> <i class="fa fa-clone"></i></a>',
        responsivePriority: 2
      },
      {
        data: 'active', 'width': '5%',
        render: function (data, type, row) {
          if (data) {
            // return data;
            return '<form class="smart-form"><label class="toggle"><input id="contracts" type="checkbox" name="checkbox-toggle"  checked="checked" /><i  style="border-radius: 0px;top :2px;;" data-swchon-text="ON" data-swchoff-text="OFF"></i></label></form>';
          } else {
            // return data;
            return '<form class="smart-form"><label class="toggle"><input id="contracts" type="checkbox"  name="checkbox-toggle" /><i  style="border-radius: 0px;top :2px;;" data-swchon-text="ON" data-swchoff-text="OFF"></i></label></form>';
          }
        },
        "targets": 2
      }
    ],
    rowCallback: (row: Node, data: any | Object, index: number) => {
      $('input', row).unbind('click');
      $('input', row).bind('click', () => {
        let toggleSwitch = event.target as any;
        let status = toggleSwitch.checked;
        this.strategyDataService.changeStrategyStatus(data.name, status).subscribe(response => response.code);
      });
      //Clone Strategy
      $('a.clone_save', row).unbind('click');
      $('a.clone_save', row).bind('click', () => {
        this.cloneStrategy(data);
      })
    },
    "pageLength": 2
  }

现在在html模板中,我有自己的搜索字段,看起来像这样

Datatable Image

此搜索字段将按列搜索并返回结果。

搜索结果代码

columnSearch() {

    if ($.fn.DataTable.isDataTable('#strategyDataTable table')) {
      var table = $('#strategyDataTable table').DataTable({
        orderCellsTop: true,
        fixedHeader: true,
        stateSave: true,
        retrieve: true,
      });
    } 
    $('#strategyDataTable thead').on('click', 'th', function () {
      let colIndex = $(this).closest("th").index()
      $('input.filter', this).on('keyup change', function () {
        if (table.column(colIndex).search() !== this.value) {
          table
            .column(colIndex)
            .search(this.value)
            .draw();            
        }
      });
    })

  }

现在,此数据表中每页有2行,这里的问题是,如果我在第一页中搜索某些内容。如果关键字匹配,它也会从第二页返回结果。我只希望从我选择的页面获得结果,而不是其他页面。 If关键字仅匹配两行中的一行,也匹配其他页面行。它只应显示一个结果。没有其他网页结果。

0 个答案:

没有答案