pageLength dropdown and search box do not display

jdadwilson · May 9

I have two tables which are basically structured alike. One displays the pageLength dropdown and search box but one does not.

This config code works...

const BRANDS_CONFIG = {
    fadeInDuration: CONFIG.web_site.fadeInDuration || 2000,
    ajaxUrl:    "assets/ajax/ajax-brands.php",
    pageLength: 14,
        select:     false,
    layout:     { topStart: { pageLength: { menu: [10, 20, 30, 50] } },
                    topEnd:   { search:     { placeholder: 'Search'  } },
    },
    columnIndex: {
        name:   0,
        regNum: 1,
        page:   2,
        remark: 3,
        id:     4,
    },
};

The dataTables implementation...

    oTable = $("#mainTable").DataTable({
        ajax:       BRANDS_CONFIG.ajaxUrl + params,
        columns:    getTableColumns(),
        layout:     BRANDS_CONFIG.layout,
        pageLength: BRANDS_CONFIG.pageLength,
            select:     BRANDS_CONFIG.select,
            search:     { search: searchParam },
            stateSave:  searchParam ? false : undefined,

            initComplete: function () {
              hideAlphaLetters(this.api());
        },
    });

This config code for the that doesn't work...

const MEMORIALS_CONFIG = {
    fadeInDuration: CONFIG.web_site.fadeInDuration || 2000,
    ajaxUrl: "assets/ajax/ajax-memorials.php",
    pageLength: 10,
    lengthMenu: [10, 20, 30, 50],
    columnIndex: {
        name: 0,
        birthDate: 1,
        deathDate: 2,
        available: 3,
        cemetery: 4,
        id: 5,
    },
};

And the implementation that doesn't work...

    oTable = $("#mainTable").DataTable({
        ajax: ajaxUrl,
        columns: getTableColumns(),
        layout: {
            topStart: 'pageLength',
            topEnd: 'search',
            top2: 'alphabetSearch',
            top1: 'paging',
            bottom: 'info',
        },
        pageLength: MEMORIALS_CONFIG.pageLength,
        lengthMenu: MEMORIALS_CONFIG.lengthMenu,
        lengthChange: true,
        searching: true,
        ordering: false,
        stateSave: false,

        stateSaveParams: function (settings, data) {
            data.selected = $("span.active").index();
        },

        initComplete: function () {
            handleTableInitComplete(this.api());
        },
    });

    // Attach event handlers after table initialization
    attachTableEventHandlers();
}

I also use a global dataTables extend as follows...

$.extend($.fn.dataTable.defaults, {
    layout: {
        top2: "alphabetSearch",
        top1: "paging",
        bottom: "info",
    },

    paging: {
        type: "full_numbers",
    },

    language: {
        paginate: {
            first: "First",
            previous: "Prev",
            next: "Next",
            last: "Last",
        },
        lengthMenu: "Display _MENU_ records",
    },

    ordering: true,

    order: [],

    pageLength: 12,

    seaching: false,

    select: { style: "single", info: false },

    stateSave: true,

    visible: true,

    initComplete: function () {
        hideAlphaLetters(this.api());
    },

    drawCallback: function () {
        hidePagingAreas(this.api());
    },
});

Here are links to the two modules...

https://txdelta.org/brands - this displays the pageLength and search box

https://txdelta.org/memorials/033/pecan-gap - this does not display the pageLength and search box

I spent over 45 minutes on a chat with Claude Sonnet 4.5 via vsCode and could not get a resolution. Hope somebody here might have an answer.

TIA for any assistance
James A Wilson

allan · May 9

Hi,

When I load the pecan-gap page to take a look and see if I can debug it, I get an alert with:

The following error occurred...

      error - #

It would appear that is because an Ajax request is being rejected with Reason: CORS Multiple Origin Not Allowed.

I assume that is not the error that you were expecting on the page?

Also, be careful with $.extend($.fn.dataTable.defaults, { - that will not extent deep into objects. i.e. the new default language object is only what you've provided - it doesn't include any of the other default values, e.g. for sorting etc. You should probably use $.extend(true, $.fn.dataTable.defaults, { to make it a deep extend.

If you could let me know about the first point, I'll take a further look and see what help I can offer.

Allan

kthorngren · May 9

I looked at your second test case and see this when inspecting the page:

The paging, page length and search elements are in the document but each have style="display: none;" applied to their div tags. I'm not sure without being able to experiment with the code but I would look at these items:

The error Allan noted might be stopping the Javascript processing before Datatables can remove the style="display: none;" from these elements
I don't see the Alphabet search CSS is loaded. Maybe you are loading it in a style section. Probably wouldn't affect the style="display: none;".
You are using BS 3 but it doesn't look like you are loading the Datatables BS 3 style integration files. You have this:

<!-- dataTables package Styles -->
<link rel="stylesheet" href="css/dist/vendor-datatables-2.0.8.min.css">

<!-- Vendor styles -->
<link rel="stylesheet" href="css/dist/vendor-bootstrap-3.2.0.min.css">

Doesn't look like vendor-datatables-2.0.8.min.css is concatenated with the extensions you are loading with this:

<script src="vendor/datatables-2.0.8.js"></script>

Which is loading these extensions:

 * Included libraries:
 *   DataTables 2.0.8, Buttons 3.0.2, ColReorder 2.0.3, Responsive 3.0.2, Select 2.0.3, StateRestore 1.4.1

This may or may not fix your issues but I would recommend loading the Bootstrap 3 style integration files. Go to the link in the datatables-2.0.8.js file and update it to include BS 3. Use the generated files for both the CSS and JS includes.

Possibly you can comment out the ajax option to remove the error to load an empty table so we can help debug further if the above suggestions don't help.

Kevin

jdadwilson · May 9

My bad... ajax file was missing the cors headers. Fixed. Try it again.

James A Wilson

kthorngren · May 9

I cleared my browser's cache and still get that error. Looks like we cross posted, please see my above comments.

Kevin

jdadwilson · May 10

Kevin, I replaced the datatables-2.0.8 files with the newly regenerated datattables files as you suggested. This is a screenshot of the results.

You can see that the paging is not as previously displayed. Also note that the pageLength dropdown and search box do not display.

Any further suggestions?

James A Wilson

allan · May 10

Still getting the alert() on load, but dug into the code a bit and:

    drawCallback: function () {
        hidePagingAreas(this.api());
    },

In _allFunctionsJavas.js is being called. You don't have an override for that in mainTable's initialisation, therefore it is executing and hidding the search and paging elements. The function comment says:

 * Hides or shows the pagination and info areas of a DataTable based on record count.
 * If the displayed records fit within the page length, hides the pagination controls
 * and info sections. Otherwise, shows them.

But it does more than that. It is hiding the containers for the search controls as well. You could try changing:

const pagingElements = ["dt-paging", "dt-start", "dt-end"];

to:

const pagingElements = ["dt-paging", "dt-info"];

which would make it operate as the comment says.

Allan

jdadwilson · May 11

Allan, Thanks for your input. I adjusted the const pagingElements in the hidepagingAreas function. I added the dt-start, dt-length, dt-end, and dt-search items.

The length and search items now display but the two items appear on separate lines. I noted in the inspect of the elements that the dt-start has display: none but is lined through and then has an element-style of display: block. This causes the dt-start to extend the width of the table. Unchecking the element-style causes the two items to appear on the same line as they should.

Any thoughts on how the element-style display: block is getting added to the element.

BTW: are you still getting the CORS error? This should be corrected.

TIA for your assistance.
James A Wilson

jdadwilson · May 11

Reference the CORS issue. I found a conflicting statement in the htaccess file. Hope this fixed the issue. Let me know.

James A Wilson

allan · May 11

Yes, still getting the CORS error I'm afraid:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.txdelta.org/assets/ajax/ajax-load-page-text.php?Script=Memorials. (Reason: CORS request did not succeed). Status code: (null).

The pagingElements array appears to have been expanded:

const pagingElements = ["dt-paging", "dt-info", "dt-start", "dt-length", "dt-end", "dt-search"];

As an experiment, add drawCallback: () => {} to your initialisation object for #mainTable. That will stop the hidePagingAreas function from running.

I'd actually suggest that you use layout to control if table control items should be shown or not, rather than attempting to show / hide them using a function such as hidePagingAreas.

Allan

jdadwilson · May 11

Allan,

The use of the hidePagingAreas function is a UI feature. This project has 20+ dataTables. A few have over 1000 records, most of the others in the 100+ range.

On table initialization all records are loaded and the alphabet, paging, length, and search elements display. But, if a user selects a alphabet letter to filter the records and the recordsDisplay is less than (or equal to) the length, then elements like paging, length and search are functionally not needed, thus not displayed.

I commented out the call to the hidePagingAreas function which is included in the drawCallback: in the dataTables global extend. Yes, the paging items displayed, but all paging element are non-functional, which is the purpose of the hidePagingAreas function.

You mentioned using the layout: options? I'll admit, I am a long time user of dataTables and absolutely love the product.. Across the 10+ projects that I've written I probably have 100+ instances of a dataTable. But, because they all work as desired I haven't needed to update some of the features. Can what I desire with the hidePagingAreas function be accomplished via the layout alone? If so, let me know how and I'll make it happen.

James A Wilson

jdadwilson · May 11

Allan,

I had Claude Sonnet 4.5 do some investigating into the CORS issue. It changed some header code I was using. Let me know if you still get an error.

James A Wilson

kthorngren · May 11

Still getting the Ajax error.

The layout config will only be applied during initialization. Sounds like you will still need to use the hidePagingAreas function to dynamically hide the desired elements based on the number of rows displayed.

Your page is rather difficult to debug without making changes so I copied what I think are the pertinent parts into this test case:
https://live.datatables.net/yuwebodu/1/edit

Assuming you want to remove the info and paging elements the code change Allan recommended is in the test case:

const pagingElements = ["dt-paging", "dt-info"];

Does the test case behave as per your requirements?

Maybe you can update this test case to replicate the issue you are having.

Kevin

kthorngren · May 11

Just for fun I updated the test case to use ajax to make sure something unexpected didn't happen with drawCallback due to the async ajax request
https://live.datatables.net/daqofuza/1/edit

The behavior is still the same.

Again let us know if you expect something different.

Kevin

jdadwilson · May 11

I adjusted the following...

const pagingElements = ["dt-paging", "dt-length", "dt-search"];

This worked as desired. I now need to make the other adjustments to the js code. I'll let you know how that goes.

Note that I removed the dt-info (so it will display) as it is something that is informational and has no functional characteristic.

Thanks for your support. Great as always.
James A Wilson

kthorngren · May 11

I re-read your comments and it sounds like the issue now is with the length menu and search are on two lines. This will be the case on a small screen but, at least in my test case, they appear on the same like with a full page. For example:

I may be loading an old version of your page but I don't see where you updated to use the Datatables BS 3 style integration. If you haven't updated that possibly could be the problem.

Kevin

jdadwilson · May 11

Allan & Kevin,

I spoke with my technical guru regarding the CORS issue. His questions were...

What browser are you using? (Don't know)
Where are you located? (Not sure, but not in US, I think)

I'll look into adding some header into if you are outside the US.

James A Wilson

kthorngren · May 11

Here is a screenshot of the errors I get from the first link you posted:

I'm using Chrome on a Mac and live in the US. Allan is in the UK - not sure of the browser.

Possibly for you can remove the ajax request and load the table via Javascript, ie data, or create an HTML table. Might be easier than trying to debug the CORS issue as the problem is not specific to the data nor data source.

Kevin

allan · May 11

Ah - I just spotted the error in the error messages that Kevin posted. www.txdelta.org is not the same as txdelta.org. The www. is usually aliased to the main domain, but it doesn't have to be. And in this case the CORS policy is only setup to work with www.txdelta.org. It needs to be configured to work with both.

If I load https://www.txdelta.org/memorials/033/pecan-gap then the data will load. That's not a location or browser specific issue.

Allan

jdadwilson · May 11

I'll see about fixing that.

Thanks,
James A Wilson

jdadwilson · May 11

I updated the htaccess file to allow both versions. Let me know if this worked.

James A Wilson

jdadwilson · May 11

More on the display issue. I added comments to the hidePagingAreas function. Noticed that on page initialization the function is called 3 times.

Console.log

hidePagingAreas: Checking if pagination areas should be hidden or shown
hidePagingAreas: Hiding pagination areas - records fit on one page
hidePagingAreas: Checking if pagination areas should be hidden or shown
hidePagingAreas: Showing pagination areas - records span multiple pages
hidePagingAreas: Checking if pagination areas should be hidden or shown
hidePagingAreas: Showing pagination areas - records span multiple pages

Is this normal?

James A Wilson

kthorngren · May 11

I updated the htaccess file to allow both versions. Let me know if this worked.

No. Here are the new errors:

However, as Allan mentioned, using this does work:

https://www.txdelta.org/memorials/033/pecan-gap

The length menu and search input are on separate lines as you mentioned. It looks like you are still using the Datatables default styling:

The test case I created uses the Datatables BS 3 style integration libraries. Note that layout uses the BS row and column classes to arrange the elements:

You can see the length change and search each use col-6-sm to place the topStart and topEnd properly in the row defined in the enclosing div.

This is why I suggested using the Datatables BS 3 style integration and suggested it might fix the issue with the length change and search being on separate lines.

Kevin

kthorngren · May 11

More on the display issue. I added comments to the hidePagingAreas function. Noticed that on page initialization the function is called 3 times.

It's common for drawCallback to be called multiple times during initialization. The number of times will be determined by the config. I updated my ajax test case to show an example - look at the console:
https://live.datatables.net/daqofuza/3/edit

Kevin

jdadwilson · May 11

Allan & Kevin;

Gentlemen, I think the dataTable issue can be laid to rest. It now functions as desired. Let me know about the CORS issue.

Is there a way that I might provide you a token of my appreciation with a donation to your favorite beverage fund? I greatly appreciate all the help you have provided recently and over the years.

If you prefer, send me a private email with a connection to your favorite beverage fund.

James A Wilson.

kthorngren · May 11

Glad you got it working! I would be happy for you to donate to Allan's project at the supporters page.

Kevin

jdadwilson · May 11

Glad to do so!

allan · May 12

Many thanks fellas - much appreciated .

Great to hear we are able to get to the bottom of the issue.

Allan

pageLength dropdown and search box do not display

pageLength dropdown and search box do not display

Replies

Howdy, Stranger!

Categories

DataTables

pageLength dropdown and search box do not display

pageLength dropdown and search box do not display

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables