Question

我正在尝试基于jquery中的下拉列表实现select。表中的数据使用数据库中的java填充我的jquery脚本代码是

    <script>    
    $(document).ready(function () {
            $("#companies").dataTable({
            "bServerSide": true,
            "sAjaxSource": "/JQueryDataTablesAll/CompanyGsonMatrix",
            "bProcessing": true,
            "sPaginationType": "full_numbers",
            "bJQueryUI": true
        });
        $('#mySelect').DataTable( {
            initComplete: function () {
              var api = this.api();
              alert("test");
              api.columns().indexes().flatten().each( function ( i ) {
                var column = api.column( i );
                var select = $('<select><option value=""></option></select>')
                  .appendTo( $(column.footer()).empty() )
                  .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                      $(this).val()
                    );

                    column
                      .search( val ? '^'+val+'$' : '', true, false )
                      .draw();
                  } );

                column.data().unique().sort().each( function ( d, j ) {
                  select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
              } );
            }
          } );
    });
  </script>

我的html选择代码是

<select id="mySelect">
  <option value="">Emkay</option>
  <option vaoue="1">
</option>

但这不起作用。我是jquery的新手，所以请帮我解决这个问题。

Answer 1

尝试这样修理：

$(document).ready(function () {
    $("#companies").DataTable({
        "bServerSide": true,
        "sAjaxSource": "/JQueryDataTablesAll/CompanyGsonMatrix",
        "bProcessing": true,
        "sPaginationType": "full_numbers",
        "bJQueryUI": true,
        initComplete: function () {
            var api = this.api();
            alert("test");
            api.columns().indexes().flatten().each(function (i) {
                var column = api.column(i);
                var select = $('<select><option value=""></option></select>')
                    .appendTo($(column.footer()).empty())
                    .on('change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val());

                    column.search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                });

                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            });
        }
    });
});

此代码将在每列的底部添加一个选择。如果您只想让一个选择通过您自己的选项搜索整个表格，您可以执行以下操作：

$(document).ready(function () {
    $('#example').DataTable({
        "bServerSide": true,
        "sAjaxSource": "/JQueryDataTablesAll/CompanyGsonMatrix",
        "bProcessing": true,
        "sPaginationType": "full_numbers",
        "bJQueryUI": true,
        initComplete: function () {
            var self = this,
                api = self.api(),
                $select = $('#mySelect');

            $select.change(function (e) {
                var val = $.fn.DataTable.util.escapeRegex($(this).val());
                api.search(val ? val : '', true, false).draw();
            });

        }
    });
});

<强> FIDDLE

使用jquery从下拉列表中选择数据

1 个答案: