Question

我在这里提供的ddtf.js使用jQuery表过滤器 http://www.jqueryscript.net/demo/Simple-jQuery-Dropdown-Table-Filter-Plugin-ddtf-js/ 问题是如何选择我要过滤的单元格？例如，我想删除＆＃39;＃item＆＃39;从过滤开始，只留下＆＃39; type＆＃39;和＆＃39;库存＆＃39;。

Answer 1

这可以通过CSS实现，并对html进行微小的更新。

DDTF将原始文本保存在display:none div中。我们只需要更新我们的HTML，以便我们可以选择＆＃34;我们希望覆盖的表格标题。

<强> HTML

<table id="table_format" class="table table-bordered">
    <tbody>
        <tr>
            <!-- ADD CLASSES TO TH -->
            <th class="option-item">Item #</th>
            <th class="option-type">Type</th>
            <th class="option-stock">In Stock</th>
        </tr>
        ...

<强> CSS

.ddtf-processed th.option-item > select{
    display:none;
}
.ddtf-processed th.option-item > div{
    display:block !important;
}

＆＃13;

/*
* Below is the ddTableFilter include
*/

(function($) {

    $.fn.ddTableFilter = function(options) {
        options = $.extend(true, $.fn.ddTableFilter.defaultOptions, options);

        return this.each(function() {
            if ($(this).hasClass('ddtf-processed')) {
                refreshFilters(this);
                return;
            }
            var table = $(this);
            var start = new Date();

            $('th:visible', table).each(function(index) {
                if ($(this).hasClass('skip-filter')) return;
                var selectbox = $('<select>');
                var values = [];
                var opts = [];
                selectbox.append('<option value="--all--">' + $(this).text() + '</option>');

                var col = $('tr:not(.skip-filter) td:nth-child(' + (index + 1) + ')', table).each(function() {
                    var cellVal = options.valueCallback.apply(this);
                    if (cellVal.length == 0) {
                        cellVal = '--empty--';
                    }
                    $(this).attr('ddtf-value', cellVal);

                    if ($.inArray(cellVal, values) === -1) {
                        var cellText = options.textCallback.apply(this);
                        if (cellText.length == 0) {
                            cellText = options.emptyText;
                        }
                        values.push(cellVal);
                        opts.push({
                            val: cellVal,
                            text: cellText
                        });
                    }
                });
                if (opts.length < options.minOptions) {
                    return;
                }
                if (options.sortOpt) {
                    opts.sort(options.sortOptCallback);
                }
                $.each(opts, function() {
                    $(selectbox).append('<option value="' + this.val + '">' + this.text + '</option>')
                });

                $(this).wrapInner('<div style="display:none">');
                $(this).append(selectbox);

                selectbox.bind('change', {
                    column: col
                }, function(event) {
                    var changeStart = new Date();
                    var value = $(this).val();

                    event.data.column.each(function() {
                        if ($(this).attr('ddtf-value') === value || value == '--all--') {
                            $(this).removeClass('ddtf-filtered');
                        } else {
                            $(this).addClass('ddtf-filtered');
                        }
                    });
                    var changeStop = new Date();
                    if (options.debug) {
                        console.log('Search: ' + (changeStop.getTime() - changeStart.getTime()) + 'ms');
                    }
                    refreshFilters(table);

                });
                table.addClass('ddtf-processed');
                if ($.isFunction(options.afterBuild)) {
                    options.afterBuild.apply(table);
                }
            });

            function refreshFilters(table) {
                var refreshStart = new Date();
                $('tr', table).each(function() {
                    var row = $(this);
                    if ($('td.ddtf-filtered', row).length > 0) {
                        options.transition.hide.apply(row, options.transition.options);
                    } else {
                        options.transition.show.apply(row, options.transition.options);
                    }
                });

                if ($.isFunction(options.afterFilter)) {
                    options.afterFilter.apply(table);
                }

                if (options.debug) {
                    var refreshEnd = new Date();
                    console.log('Refresh: ' + (refreshEnd.getTime() - refreshStart.getTime()) + 'ms');
                }
            }

            if (options.debug) {
                var stop = new Date();
                console.log('Build: ' + (stop.getTime() - start.getTime()) + 'ms');
            }
        });
    };

    $.fn.ddTableFilter.defaultOptions = {
        valueCallback: function() {
            return encodeURIComponent($.trim($(this).text()));
        },
        textCallback: function() {
            return $.trim($(this).text());
        },
        sortOptCallback: function(a, b) {
            return a.text.toLowerCase() > b.text.toLowerCase();
        },
        afterFilter: null,
        afterBuild: null,
        transition: {
            hide: $.fn.hide,
            show: $.fn.show,
            options: []
        },
        emptyText: '--Empty--',
        sortOpt: true,
        debug: false,
        minOptions: 2
    }

})(jQuery);
/*
 OUR CODE
*/
(function($){
	$(function(){
		$('#table_format').ddTableFilter();
	});
})(jQuery)

＆＃13;

.ddtf-processed th.option-item > select{
	display:none;
}
.ddtf-processed th.option-item > div{
	display:block !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table_format" class="table table-bordered">
    <tbody>
        <tr>
            <!-- ADD CLASSES TO TH -->
            <th class="option-item">Item #</th>
            <th class="option-type">Type</th>
            <th class="option-stock">In Stock</th>
        </tr>
        <tr>
            <td>Item 1</td>
            <td>Special</td>
            <td>Y</td>
        </tr>
        <tr>
            <td>Item 2</td>
            <td>Not Special</td>
            <td>N</td>
        </tr>
        <tr>
            <td>Item 3</td>
            <td>Special</td>
            <td>N</td>
        </tr>
    </tbody>
</table>

＆＃13;

如何在ddtf.js中过滤单元格

1 个答案: