jQuery DataTables无法搜索长名称

Question

我开发了jQuery DataTables，它的工作正常，但我遇到了一些问题，我可以搜索1/30但是无法搜索这个类型的单词，

1/30 Reguler 100%Polyester CF Compacted

问题是<th style="width:50px;">Item Name</th>列  我该怎么办呢，

$(document).on('click', '.selectid', function (e) {
    e.preventDefault();
    $('#hfRowItem1').val(parseInt($(this).parents('tr').children('td').eq(0).html()));
    $('#hfRowItem2').val(parseInt($(this).parents('tr').children('td').eq(4).html()));
    $('#btnFakeRowClick').trigger('click');
});

$(function Pageload() {
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () {

        $(document).ready(function () {
            var dataTableInstance = $('#datatable').DataTable({
                "iDisplayLength": 5,
                "bStateSave": false,    //restore table state on page reload,
                "oLanguage": {
                    "sLengthMenu": 'Show <select><option value="5">5</option><option value="10">10</option></select> entries'
                },
                "bJQueryUI": true,
                "bAutoWidth": false,
                columns: [
                    {
                        'data': 'ProcessPlanId',
                        className: 'hide_column'
                    },
                    { 'data': 'ProcessPlanNo' },
                    { 'data': 'StyleName' },
                    { 'data': 'ItemName' },
                    { 'data': 'ColourNumber' },
                    {
                        'data': 'ProcessPlanDate',
                        'render': function (jsonDate) {
                            var date = new Date(parseInt(jsonDate.substr(6)));
                            var month = date.getMonth() + 1;
                            //return date.getDate() + '/' + month + '/' + date.getFullYear();
                            return ("0" + date.getDate()).slice(-2) + '/' + ("0" + month).slice(-2) + '/' + date.getFullYear();
                        }
                    },
                    { 'data': 'ConfirmStatus' },
                    {
                        'data': null,
                        className: "center",
                        defaultContent: '<a href="" class="selectid">Select</a>', 'width': '5%'
                    }
                ],
                bServerSide: true,
                sAjaxSource: 'GenericHandlers/ProcessPlanDataHandler.ashx'
            });


            $('#datatable tfoot th').each(function () {
                if ($(this).index() != 0 && $(this).index() != 7) {
                    //var title = $('#datatable thead th').eq($(this).index()).text();
                    $(this).html('<input type="text" class="dtSrchCol" placeholder="Search">');
                    if ($(this).index() == 5) {
                        $(this).find('input').addClass('datetimepicker');
                    }
                }
            });


            dataTableInstance.columns().every(function () {
                var datatableColumn = this;

                $(this.footer()).find('input').on('keyup change', function () {
                    datatableColumn.search(this.value).draw();
                });
            });
        });
    });
});
$(document).ready(Pageload);

<div class="modal fade" id="mpSrch" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg" style="width: 95%">
                        <div class="modal-content">
                            <div class="modal-header btn-primary btn-sm" style="height: 40px;">
                                <button style="margin-top: -10px;" type="button" class="close btn-sm" data-dismiss="modal" aria-hidden="true">×</button>
                                <h6 style="margin-top: -5px;"><i class="glyphicon glyphicon-search"></i>Process Plan</h6>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-12">

                                        <div class="modal-content" style="margin-left: 15px;width: 1250px;padding: 2px;">
                                            <table id="datatable" class="datatableDisplay" font-size:"11pt">
                                                <thead>
                                                    <tr>
                                                        <th>Id</th>
                                                         <th style="width:50px;">Process Plan No</th>
                                                       <th style="width:50px;">Style Name</th>
                                                       <th style="width:50px;">Item Name</th>
                                                    <th style="width:50px;">Colour Number</th>
                                                      <th style="width:50px;">Process Plan Date</th>
                                                     <th style="width:50px;">Confirm Status</th>
                                                      <th style="margin-left:-25px;">Action</th>
                                                    </tr>
                                                </thead>
                                                <tfoot>
                                                    <div id="eee">
                                                        <tr>
                                                            <th></th>
                                                            <th></th>
                                                            <th></th>
                                                            <th></th>
                                                            <th></th>
                                                            <th></th>
                                                            <th></th>
                                                            <th></th>
                                                        </tr>
                                                    </div>
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Answer 1

您可能需要在默认情况下启用的DataTables上禁用智能过滤。我的理解是智能过滤会通过在空格上分割搜索字符串然后使用正则表达式来过滤该列中的值来将字符串拆分为单词部分。如果它在带有空格的复杂字符串上窒息，我不会感到惊讶。 https://datatables.net/reference/option/search.smart