Question

我正在尝试在数据表上实现搜索突出显示（JSON数据即将到来，并通过＆＃34; sAjaxSource＆＃34;填写表格），请参阅以下代码了解详细信息。

默认情况下搜索正在运行，但突出显示根本不起作用。

我提醒了searchTxt的数据+ = $（＆＃39;＃search_input＆＃39;）。val（）;提醒（＆＃34; txt＆＃34; + searchTxt）; 并且警报显示搜索输入框文本。警告＆＃34;警报（＆＃34;＆＃34; + aData [j]）; ＆＃34;显示＆＃34;未定义而不是列数据和突出显示无效。

有人可以对此有所了解吗？

谢谢你，斯

jQuery(document).ready(function() {
  var oTable = jQuery('#example').dataTable({
 "sDom": '<"#table_header"<"#inner_table_header"<"filtertx">fCT<"filterbtn">>>tipl',
  "sAjaxSource": ajaxURL,
 "bDeferRender": true,
 "bProcessing" :  true,
 "bJQueryUI": true,  
 "sScrollY": 500,
 "aaSorting": [[0, 'desc']],
 "aoColumns": [
  { "mData": "name" },
  { "mData": "flag" }
 ],
 "oSearch": {"sSearch": "", 
    "bSmart": true,
    "bRegex": false},
"sPaginationType": "paginate",
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
    $(nRow).addClass('clickable');  
    $(nRow).attr('onClick', "editPopup(" + aData['conditionId'] + ")");
},
"fnDrawCallback": function( oSettings ) {
   $(expandWrapper);
 }
 });

   $("#example_filter label").attr("for", "search_input");
     $("#example_filter input").attr({
         "id": "search_input",
         "placeholder" : 'search'
    }); 
    oTable.fnSearchHighlighting();
  });

jQuery.fn.dataTableExt.oApi.fnSearchHighlighting = function(oSettings) {

        oSettings.oPreviousSearch.oSearchCaches = {};
        oSettings.oApi._fnCallbackReg( oSettings, 'aoRowCallback', function( nRow, aData,              iDisplayIndex, iDisplayIndexFull) {
                        var searchStrings = [];
                        var oApi = this.oApi;
                        var cache = oSettings.oPreviousSearch.oSearchCaches;
                    // Global search string
                    // If there is a global search string, add it to the search string array
                    if (oSettings.oPreviousSearch.sSearch) {
                        searchStrings.push(oSettings.oPreviousSearch.sSearch);
                    }
                    // Individual column search option object
        // If there are individual column search strings, add them to the search string array

    searchTxt=$('#filter_input input[type="text"]').val();
    searchTxt+=$('#search_input').val();

    alert("txt" + searchTxt);
    if ((oSettings.aoPreSearchCols) && (oSettings.aoPreSearchCols.length > 0)) {
        for (var i in oSettings.aoPreSearchCols) {
            if (oSettings.aoPreSearchCols[i].sSearch) {
                searchStrings.push(searchTxt);
            }
        }
    }
    // Create the regex built from one or more search string and cache as necessary
    if (searchStrings.length > 0) {
        var sSregex = searchStrings.join("|");
        if (!cache[sSregex]) {
            // This regex will avoid in HTML matches
            cache[sSregex] = new RegExp("("+escapeRegExpSpecialChars(sSregex)+")(?!([^<]+)?>)", 'i');
        }
        var regex = cache[sSregex];
    }
    // Loop through the rows/fields for matches
    jQuery('td', nRow).each( function(i) {

    // Take into account that ColVis may be in use
    var j = oApi._fnVisibleToColumnIndex( oSettings,i);
    // Only try to highlight if the cell is not empty or null

    alert(""+ aData[j]);

    if (aData[j]) {
    // If there is a search string try to match
    if ((typeof sSregex !== 'undefined') && (sSregex)) {
        alert("here");
        this.innerHTML = aData[j].replace( regex, function(matched) {
        return "<span class='filterMatches'>"+matched+"</span>";
        });
    }
    // Otherwise reset to a clean string
    else {
        this.innerHTML = aData[j];
    }
    }
    });
    return nRow;
    }, 'row-highlight');
    return this;
    };

Answer 1

无论搜索功能是什么，如果您使用mData填充json数据，请使用mData信息检索列数据并突出显示（不要使用索引来检索列数据以进行搜索和突出显示）

var colProp = oSettings.aoColumns [i] .mData;

    jQuery('td', nRow).each( function(i) {
                    /* Take into account that ColVis may be in use

                        var j = oApi._fnVisibleToColumnIndex( oSettings,i);

                    Only try to highlight if the cell is not empty or null
                     */
                    var colProp = oSettings.aoColumns[i].mData;

                if (aData[colProp] !== undefined && aData[colProp] !== null && aData[colProp] !== "") {
                        // If there is a search string try to match
                        if ((typeof sSregex !== 'undefined') && (sSregex)) {
                            var mapObj = {
                                            '&#0174;' : "\u00AE",
                                            '&#0153;' : "\u2122",
                                            '&#034;'  : "\u201C",
                                            '&nbsp;'  : " "
                                        };
                                        aData[colProp] = aData[colProp].replace(/(&#0174;)|(&#0153;)|(&#034;)|(&nbsp;)/gi, function(matched){
                                            return mapObj[matched];
                                        }); 
                            this.innerHTML = aData[colProp].replace( regex, function(matched) {
                                return "<span class='filterMatches'>"+matched+"</span>";
                            });
                        }

                        else {
                            this.innerHTML = aData[colProp];
                        }
                    }
                });
                return nRow;
            }, 'row-highlight');
            return this;

DataTables sAjaxSource Json higlight搜索数据

1 个答案: