Hey there, Awesome Customers!

Just a heads up: We'll be taking a breather to celebrate International Workers' Day (May 1st and 2nd - Wednesday and Thursday) and Orthodox Easter from Good Friday (May 3rd) through Easter Monday (May 6th). So, from May 1st to May 6th, our team will be off enjoying some well-deserved downtime.

During this time, our customer support will be running on a smaller crew, but don't worry! We'll still be around to help with any urgent matters, though it might take us a bit longer than usual to get back to you.

We'll be back in action at full throttle on May 7th (Tuesday), ready to tackle your questions and requests with gusto!

In the meantime, you can explore our documentation for Amelia and wpDataTables. You'll find loads of helpful resources, including articles and handy video tutorials on YouTube (Amelia's YouTube Channel and wpDataTables' YouTube Channel). These gems might just have the answers you're looking for while we're kicking back.

Thanks a bunch for your understanding and support!

Catch you on the flip side!

Warm regards,

TMS

Okay
  Public Ticket #2444465
lock column and search
Closed

Comments

  • Anthony started the conversation

    Hi

    1. Can you tell me please about whether there is an option to lock/freeze the first column?

    We have a very large set of data (around 70 columns and 80,000+ records) that we want to put on the front of a WordPress website.  Naturally horizontal scrolling becomes problematic because you can easily lose the line of the record you are on.

    2. Can you also please tell me if there is any kind of overall advanced search functionality to look through all or limited columns?

    3. Is there any way a search can use boolean style techniques so you can search for things which are similar?

    For example, if you have a list of names in a column, often there are several potential spellings for the same name.

  •  2,498
    Aleksandar replied

    Hello Anthony

    Thank you for your interest in our plugin.

    1. There's no built in option, but I can send you some code one of our customers used to freeze both the first column and the first row.

    2. There's a global search, which will look through all columns in the table, and there are filters which will go through only a specified column.

    3. Unfortunately, search looks for the data you've entered, so Bryan will not return Brian as well if that's what you were asking.

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •   Anthony replied privately
  • Anthony replied

    Can you also please confirm with the pagination - do you only show the first 5 pages and then it can only increase by page or skip to the end?

    We only want to show 10 entries at a time (so it is manageable on screen to view) - but in a database of 80,000 records, even when sorted, there is often a large amount of pages to scroll through.  It seems unsual that when you go past 5 pages it only offers you to go up one by one?


  •  2,498
    Aleksandar replied

    Hello Anthony

    The customer created a fixed header and column using translation of x and y (no absolute or fixed position used), and here's one solution, take a look:

    First of all, you gotta set the z-index for each component below:

    jQuery("#table td").css({"z-index": "-1", "position": "relative"});  
    jQuery("table tr td:first-child").css({'z-index': '1', 'position': 'relative'});
    jQuery("table th:first-child").css({ 'z-index':'2','position':'relative'});

    Then you gotta add listener on scroll like this:

    jQuery('document').scroll(function () {
       scrollBlock();
    });

    If your table is set to be scrollable, then you might want to add this in as well:

    jQuery('.wdtscroll').scroll(function () { scrollBlock();
    });

    And here's the scrollBlock() part, it is ugly though, but it works for me though. (noted: the numbers work for my theme, if it is not working correctly on yours, then try to adjust the number until it fits.)

    function scrollBlock(){
                            var table = document.querySelector('table');
                var top = table.getBoundingClientRect().top;
                top = document.body.className.search('admin') > 0 ? top - 32 : top + 3; // this value can change
                var left = table.getBoundingClientRect().left;
                if(left >= 20){ // before scrolling left (before transforming)
                                    if(top >= 0){ // before reaching header bar
                        jQuery("#table_1 thead th").css("transform", "translateY(0px)");
                         translate(jQuery("table th:nth-child(1)"), 0, 0);
                         translate(jQuery("table td:nth-child(1)"), 0, 0);
                                        } else{ // after reaching header bar
                         jQuery("#table_1 thead th").css("transform", "translateY( " + (-top) + "px)");
                         translate(jQuery("table th:nth-child(1)"), 0, -top);
                         translate(jQuery("table td:nth-child(1)"), 0, 0);
                     }
                } else{ // after scrolling left
                                    if(top >= 0){
                        jQuery("#table_1 thead th").css("transform", "translateY(0px)");
                        translate(jQuery("table th:nth-child(1)"), -left + 46, 0);
                        translate(jQuery("table td:nth-child(1)"), -left + 46, 0);
                                        } else{
                         jQuery("#table_1 thead th").css("transform", "translateY( " + (-top) + "px)");
                         translate(jQuery("table th:nth-child(1)"), -left + 46, -top);
                         translate(jQuery("table td:nth-child(1)"), -left + 46, 0);
                         }
                    }
                }
    function translate(element, x, y) {
                   var translation = "translate(" + x + "px," + y + "px)"
                    element.css({
                            "transform": translation,
                                    "-ms-transform": translation,
                                    "-webkit-transform": translation,
                                    "-o-transform": translation,
                                    "-moz-transform": translation,
                    });
    }
    

    It is kind of messy, you definitely can't copy and paste and expect it to work for you. You need to spend some time to figure it out. 

    Please note that this is custom work, and as custom work it is not included in the provided support. For any further assistance like this, you will need to open a ticket in wpDataTables section, not in pre-purchase. Per our policy, this shouldn't be shared in a pre-purchase ticket, so I hope you understand my further limitations about similar questions.

    I'm not sure what you mean with the pagination. You can choose how many rows will be displayed on a single page in the Display tab above the table. Don't set it to "all", though, since the table with 80.000 entries will break.

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •   Anthony replied privately
  •  2,498
    Aleksandar replied

    I see, Anthony

    I'm sorry, but this is how the plugin works at the moment, and there's no way to change that.

    It may be a good suggestion for our developers, so can you please add it as a feature suggestion on this page?

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  • Darren Foulds replied

    Hi Aleksandar,

    Would it be possible to get the code to freeze the first column? Thank you.

    Darren Foulds

  •  2,498
    Aleksandar replied

    Hey Darren.

    I just made that comment public (https://tmsplugins.ticksy.com/ticket/2444465/#comment-12730712), so just scroll down in this ticket, and you'll see how to do it.

    The date when this was posted is June 23, 2020.

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables