Question

我正在尝试在选择特定的单选按钮时禁用数据表上的搜索字段。

我正在使用icheck插件

我正在考虑使用模糊甚至是这个我的HTML

constructor(props) {
    super(props)
    this.state = {
      activeButton: null,
      dataList: [
        { id: 1, name: 'te1' },
        { id: 2, name: 'test2' }
      ]
    }

  }

  callCircleButton = (id) => {
    this.setState({ activeButton: id })
  }

  render() {
    return (
      this.state.dataList.map((data, i) => {
        return (
          <View style={{ flex: 1, flexDirection: 'row' }}>
            <Text>{data.name}</Text>
            <TouchableOpacity onPress={() => this.callCircleButton(data.id)}>
              {this.state.activeButton === data.id ?
                <Icon active size={25} name='panorama-fish-eye' style={{ marginRight: 10, color: 'green' }} />
                :
                <Icon active size={25} name='lens' style={{ marginRight: 10, color: 'white' }} />
              }
            </TouchableOpacity>
          </View>
        )
      })
    )
  }

我的Js

<div class="box-tools pull-right">
    <label for="rbn_buscar_codigo">
        <input type="radio" name="buscar_por" class="flat-red" id="rbn_buscar_codigo">
        <strong>Código</strong>
    </label>
    <label for="rbn_buscar_linea">
        <input type="radio" name="buscar_por" class="flat-red" id="rbn_buscar_linea">
        <strong>Línea</strong>
    </label>
    <label for="rbn_buscar_seccion">
        <input type="radio" name="buscar_por" class="flat-red" id="rbn_buscar_seccion">
        <strong>Sección</strong>
    </label>
    <label for="rbn_buscar_descripcion">
        <input type="radio" name="buscar_por" class="flat-red" id="rbn_buscar_descripcion">
        <strong>Descripción</strong>
    </label>
    <label for="rbn_buscar_todos">
        <input type="radio" name="buscar_por" class="flat-red" id="rbn_buscar_todos">
        <strong>Todos</strong>
    </label>
</div>

在文档中有一种方法可以销毁数据表.destroy（）但我不知道如何在取消选中radiobutton并再选择另一个时再次创建它

Answer 1

我做到了这一点，不是最好的解决方案，但是他们会为不同的网址获取不同的数据

$(document).ready(function () {
  var tablaBusqueda = $('#postTable').DataTable({
    'searching': false,
    'language': {
      'url': '../plugins/dataTables.spanish.lang'
    }
  })
  $('#rbn_buscar_codigo').on('ifChecked', function (event) {

    tablaBusqueda.destroy()
    alert('tabla codigo')
    tablaBusqueda = $('#postTable').DataTable({
      'searching': false,
      'language': {
        'url': '../plugins/dataTables.spanish.lang'
      }
    })
  })
  $('#rbn_buscar_descripcion').on('ifChecked', function (event) {
    tablaBusqueda.destroy()
    alert('tabla descripcion')
    tablaBusqueda = $('#postTable').DataTable({

      'language': {
        'url': '../plugins/dataTables.spanish.lang'
      }
    })
  })
  $('#rbn_buscar_linea').on('ifChecked', function (event) {
    tablaBusqueda.destroy()
    alert('tabla linea')
    tablaBusqueda = $('#postTable').DataTable({

      'language': {
        'url': '../plugins/dataTables.spanish.lang'
      }
    })
  })
  $('#rbn_buscar_seccion').on('ifChecked', function (event) {
    tablaBusqueda.destroy()
    alert('tabla seccion')
    tablaBusqueda = $('#postTable').DataTable({

      'language': {
        'url': '../plugins/dataTables.spanish.lang'
      }
    })
  })
  $('#rbn_buscar_todos').on('ifChecked', function (event) {
    tablaBusqueda.destroy()
    alert('tabla todos')
    tablaBusqueda = $('#postTable').DataTable({

      'language': {
        'url': '../plugins/dataTables.spanish.lang'
      }
    })
  })

})

Answer 2

搜索div id是example_filter。只需在选中单选按钮时使用jquery隐藏div。

有没有办法通过特定事件启用/禁用数据表搜索？

2 个答案: