SearchBuilder RTL support

jonags

Link to test case:

http://live.datatables.net/luzexopi/1/edit

Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hi guys,

Do you plan to implement RTL to searchBuilder ? Currently the RTL doesn't work at all as expected on searchBuilder and we can't manage that by CSS because many elements styles are calculated on events.

See example above.

Thanks.

allan

It isn't on the work list at the moment, but I would warmly welcome a pull request that adds support for RTL.

Allan

jonags

Sorry but i am not able to make this changes into the searchBuilder extension.
Very sad that DataTables support RTL but not SearchBuilder, so we can't use it on RTL projects.

allan

If there is demand for it, or someone (yourself?) would like to sponsor the development of it, then I'll be able to prioritise it. But at the moment, there is such a backlog, I'm afraid there are a few other things that I need to work on first. Sorry.

Allan

jonags

No problem.
Hope some others would request the same thing

jonags

For those who need the same thing, here is a temp solution.

Ps : Tested only with Bootstrap 5 datatables files and searchBuilder as a button.

Add in your rtl css file this content :

div.dataTables_wrapper { direction:rtl; }
div.dataTables_wrapper div.dataTables_filter { text-align:left; }

div.dtsb-searchBuilder { text-align:right; }
div.dtsb-searchBuilder div.dtsb-titleRow { display:flex; justify-content:space-between; }
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria .form-select { padding-left: 30px !important; padding-right: .75em !important; }
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown, div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input { margin-left: .8em; margin-right: 0; }
div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer { margin-left:.8em; margin-right:0; }
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button.dtsb-delete, div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button.dtsb-right, div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button.dtsb-left { margin-left:.8em; margin-right:0; }
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button.dtsb-delete:last-child, div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button.dtsb-right:last-child, div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button.dtsb-left:last-child { margin:0; }

And add in a new JS file that you will load after datatables :

(function($) {
    /**
     * -------------------------------------------------------------------------
     * On load
     * -------------------------------------------------------------------------
     */
    $(function() {
        /***********************************
         * Extend DataTable group
         ***********************************/
        $.extend(
            true,
            $.fn.dataTable.Group,
            {
                prototype                           : {
                    setupLogic                          : function() {
                        // Remove logic button
                        this.dom.logicContainer.remove();
                        this.dom.clear.remove();

                        // If there are no criteria in the group then keep the logic removed and return
                        if(this.s.criteria.length < 1)
                        {
                            if(!this.s.isChild)
                            {
                                this.dom.container.trigger('dtsb-destroy');

                                // Set criteria left margin
                                this.dom.container.css('margin-left', 0);
                            }

                            return;
                        }

                        this.dom.clear.height('0px');
                        this.dom.logicContainer.append(this.dom.clear);

                        // Prepend logic button
                        this.dom.container.prepend(this.dom.logicContainer);

                        for(var _i = 0, _a = this.s.criteria; _i < _a.length; _i++)
                        {
                            var crit                            = _a[_i];

                            if(crit.criteria instanceof $.fn.dataTable.Criteria)
                                crit.criteria.setupButtons();
                        }

                        // Set width, take 2 for the border
                        var height                          = this.dom.container.outerHeight() - 1;

                        this.dom.logicContainer.width(height);
                        this._setLogicListener();

                        // Set criteria left margin
                        this.dom.container.css('margin-right', this.dom.logicContainer.outerHeight(true));

                        var logicOffset                     = this.dom.logicContainer.offset();

                        // Set horizontal alignment
                        var currentLeft                     = logicOffset.left;
                        var groupLeft                       = this.dom.container.offset().left;
                        var shuffleLeft                     = currentLeft - groupLeft;
                        var newPos                          = groupLeft + this.dom.container.outerWidth(true) - this.dom.logicContainer.height();

                        this.dom.logicContainer.offset({ left: newPos });

                        // Set vertical alignment
                        var firstCrit                       = this.dom.logicContainer.next();
                        var currentTop                      = logicOffset.top;
                        var firstTop                        = $(firstCrit).offset().top;
                        var shuffleTop                      = currentTop - firstTop;
                        var newTop                          = currentTop - shuffleTop;

                        this.dom.logicContainer.offset({ top: newTop });

                        this.dom.clear.outerHeight(this.dom.logicContainer.height());

                        // Set clear listner event
                        this._setClearListener();
                    },
                },
            }
        );
    });
})(jQuery);

allan

Superb - thanks for sharing that with us!

Allan

alghorabaa

Thanks a lot, your solution works like a charm when browsing in PCs, but buttons don't appear normally when browsing in mobiles.