【问题标题】:jQuery DataTables not working special characters results in searchjQuery DataTables 不工作特殊字符导致搜索
【发布时间】:2016-02-06 13:52:56
【问题描述】:

我正在尝试在 jQuery Datatables 插件中搜索一些带有特殊字符的单词。

数据表中有一些结果是这样的:

Peinado, Alma_María
Aguilar Castillo, Antonio José

当我尝试搜索“alma_maría”时,会显示第一个结果:

Peinado, Alma_María

当我尝试“alma_maria”(请注意,我使用字符“i”而不是“í”)时,没有显示任何内容。

屏幕截图 1:

截图 2:

有什么方法可以配置数据表在我不使用特殊字符进行搜索时显示特殊字符结果?

我的 HTML/Javascript 代码:

<table class="display table table-bordered table-striped" id="table-colegiados">
<thead>
<tr>
    <th>{$TXT.nombre}</th>
    <th>{$TXT.ciudad}</th>
    <th>{$TXT.email}</th>
    <th>{$TXT.telefono}</th>
    <th>{$TXT.dni}</th>
    <th>{$TXT.colegiado}</th>
    <th>{$TXT.asesor}</th>
    <th>{$TXT.editar}</th>
    <th>{$TXT.borrar}</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

<script type="text/javascript">
    $.fn.dataTableExt.oApi.fnGetFilteredNodes = function ( oSettings )
    {
        var anRows = [];
        for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ ) {
            var nRow = oSettings.aoData[ oSettings.aiDisplay[i] ].nTr;
            anRows.push( nRow );
        }
        return anRows;
    };
    $.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) {
        if ( oSettings.nTable == document.getElementById( 'table-colegiados' )){
            var asesor = aData[6];
            var checked = $('#checkbox_asesores').is(':checked');
            if (checked) {
                if (asesor == '1') {
                    return true;
                }
            } else {
                return true;
            }
            return false;
        } else {
            return true;
        }
    });
    var oTable = $('#table-colegiados').dataTable({
            "aaSorting": [ [0,'asc'] ],
            'iDisplayLength': 25,
            "bProcessing": true,
            "bServerSide": false,
            "bDeferRender": true,
            "sAjaxSource": "ajax/getColegiados.php",
            "fnServerData": function ( sSource, aoData, fnCallback ) {
                $.getJSON( sSource, aoData, function (json) {
                    fnCallback(json)
                } );
            }
    });
    $('#checkbox_asesores').on("click", function(e) {
        oTable.fnDraw();
    });
</script>

【问题讨论】:

标签: javascript jquery datatables accent-insensitive


【解决方案1】:

答案是口音中和。并且有现成的插件。

http://www.datatables.net/plug-ins/filtering/type-based/accent-neutralise

$.fn.dataTableExt.ofnSearch['string'] = function ( data ) {
return ! data ?
    '' :
    typeof data === 'string' ?
        data
            .replace( /\n/g, ' ' )
            .replace( /á/g, 'a' )
            .replace( /é/g, 'e' )
            .replace( /í/g, 'i' )
            .replace( /ó/g, 'o' )
            .replace( /ú/g, 'u' )
            .replace( /ê/g, 'e' )
            .replace( /î/g, 'i' )
            .replace( /ô/g, 'o' )
            .replace( /è/g, 'e' )
            .replace( /ï/g, 'i' )
            .replace( /ü/g, 'u' )
            .replace( /ç/g, 'c' ) :
        data;
};

演示:http://jsfiddle.net/kishoresahas/416mvzws/

【讨论】:

    【解决方案2】:

    我不知道为什么,但“口音中和”对我不起作用。

    我有一个很有创意的点子。

    我在 PHP 端使用了这样的函数:

    public function cleanString($String)
    {
        $String = str_replace(array('á','à','â','ã','ª','ä'), "a", $String);
        $String = str_replace(array('Á','À','Â','Ã','Ä'), "a", $String);
        $String = str_replace(array('Í','Ì','Î','Ï'), "i", $String);
        $String = str_replace(array('í','ì','î','ï'), "i", $String);
        $String = str_replace(array('é','è','ê','ë'), "e", $String);
        $String = str_replace(array('É','È','Ê','Ë'), "e", $String);
        $String = str_replace(array('ó','ò','ô','õ','ö','º'), "o", $String);
        $String = str_replace(array('Ó','Ò','Ô','Õ','Ö'), "o", $String);
        $String = str_replace(array('ú','ù','û','ü'), "u", $String);
        $String = str_replace(array('Ú','Ù','Û','Ü'), "u", $String);
        $String = str_replace(array('[','^','´','`','¨','~',']'), "", $String);
        $String = str_replace("ç", "c", $String);
        $String = str_replace("Ç", "C", $String);
        $String = str_replace("ñ", "n", $String);
        $String = str_replace("Ñ", "N", $String);
        $String = str_replace("Ý", "Y", $String);
        $String = str_replace("ý", "y", $String);
        $String = str_replace("&aacute;", "a", $String);
        $String = str_replace("&Aacute;", "a", $String);
        $String = str_replace("&eacute;", "e", $String);
        $String = str_replace("&Eacute;", "e", $String);
        $String = str_replace("&iacute;", "i", $String);
        $String = str_replace("&Iacute;", "i", $String);
        $String = str_replace("&oacute;", "o", $String);
        $String = str_replace("&Oacute;", "o", $String);
        $String = str_replace("&uacute;", "u", $String);
        $String = str_replace("&Uacute;", "u", $String);
        return $String;
    }
    

    用非特殊字符版本替换特殊字符。

    然后在“名称”字段中将这个非特殊字符版本添加到 JSON 中的 HTML 注释中。

    我有:

    $arrayJson = array();
    foreach ($arrayUsers as $item) {
        $arrayJson[] = array(
            $item['name'],
            $item['city'],
            $item['email'],
            $item['phone'],
            $item['id'],
            $item['colleged'],
            $item['asesor']
        );
    }
    $jsonStr = json_encode($arrayJson);
    

    现在我有:

    $arrayJson = array();
    foreach ($arrayUsers as $item) {
        $cleanName = $Utils->cleanString($item['name']);
        $arrayJson[] = array(
            '<!-- ' . $cleanName . ' -->' . $item['name'],
            $item['city'],
            $item['email'],
            $item['phone'],
            $item['id'],
            $item['colleged'],
            $item['asesor']
        );
    }
    $jsonStr = json_encode($arrayJson);
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2016-07-29
      • 1970-01-01
      • 2021-10-11
      • 1970-01-01
      • 2011-05-12
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多