DataTables sAjaxSource Json Higlight搜索數據

Question

我正在嘗試在數據表上實現搜索突出顯示（JSON數據即將到來，並通過“ sAjaxSource”從服務器端填充了該表），請查看以下代碼以獲取詳細信息。

搜索在默認情況下有效，但高亮根本不起作用。

我提醒了searchTxt + = $（'＃search_input'）。val（）;的數據 alert（“ txt” + searchTxt）; 並且警報顯示搜索輸入框文本。 Alert for“ alert（”“ + aData [j]）;”顯示“未定義而不是列數據，並且高亮不起作用。

有人能對此有所啟示嗎？

謝謝你，斯里

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 = {
                                            '®' : "\u00AE",
                                            '™' : "\u2122",
                                            '"'  : "\u201C",
                                            ' '  : " "
                                        };
                                        aData[colProp] = aData[colProp].replace(/(®)|(™)|(")|( )/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;