Multiple Tables in Tabs

Gstg

I have 2 question ....

1 - I'm linking a "local" version of my problem. I'm using multiple tables under multiple tabs. I think I've got everything working.

The challenge I'm running into is that if you run this ... the initial table headings don't seem to format correctly. As soon as you make any changes, searches, or sorting ... everything seems to reformat properly. So I'm thinking there is some form of sequencing issue.

I left Tab 1 open for reference but you can see when you go to Tab 2 and Tab 3 that the formatting is off to start with.

2 - I also have an odd question that goes along with this, and that is what happens when you utilize multiple tables with thousands of records from MySQL tables on the same page? And hundreds of users logging in at the same time? How do the tables interact with each other or do they keep separate memory tables? Specifically since they appear to utilize the same site.js.download table to build information?

Thanks so much for your help in advance.

http://live.datatables.net/giyepiko/1/edit?html,output

kthorngren

the initial table headings don't seem to format correctly. As soon as you make any changes, searches, or sorting

Sound like you need to use columns.adjust(). See this example for more info.

How do the tables interact with each other or do they keep separate memory tables?

Each table has its own data structure and API.

Specifically since they appear to utilize the same site.js.download table to build information?

Its possible your site.js uses the same jQuery ajax() call to populate multiple tables. Hard to say without seeing it. Are there specific problems you are trying to solve?

Kevin

Gstg

Thank you so much for your reply. I attempted to read and adjust using multiple options, but I suspect I'm not familiar enough with JS to format the syntax properly. Here is what I have tried.

http://live.datatables.net/gudatawi/1/edit?html,js,output

PS: When I remove the " table.columns.adjust().draw();", The tables in the other tabs work, which tends to lead me to the syntax of my usage being improper.

Thanks

kthorngren

You are getting this error in the browser's console:

Uncaught TypeError: Cannot read property 'adjust' of undefined

Take a look at this [FAQ}(https://datatables.net/faqs/index#api) and linked doc for information why. The problem is the initialization syntax. You have:

        var table = $('#example')
                .addClass( 'nowrap' )
                .dataTable( {

The dataTable should be DataTable to get an instance of the API.

After fixing that you are getting this error:

Uncaught ReferenceError: table is not defined

You have this which is executing before the Datatable are initialized:

<script> table.destroy(); </script>

You are assigning each Datatable's API to a different variable. Your columns.adjust() should reference those variables. You have table.columns.adjust().draw(); for each table. You need to use table2.columns.adjust().draw(); to reference table2, etc. The columns.adjust() API should be used when the tab becomes visible so Datatables can calculate the column width. I commented out these statements since they are in the wrong place.

For your tabs you have the following:

<div id="Tab 1" class="tabcontent">

Having spaces in the id is not allowed. The id attribute docs state this:

id's value must not contain whitespace (spaces, tabs etc.).

In order to use columns.adjust() it needs to be moved into the openCity() function and executed against the visible table. We need to use the div id to find the table. This won't work with the spaces. I changed this by removing the space in the id and in the onclick="openCity(event, 'Tab1')".

See this updated example with these fixes:
http://live.datatables.net/gudatawi/2/edit

Kevin

Gstg

Wow! I had a lot going wrong that I didn't know about. Thank you do much!

Gstg

The example given fixed everything in the test fixed databases. But when I hooked it up to the MySql database I received a few strange things happening.

1 - The first table (Tab 1) works great, but other tables require a double click of the tab button. This tends to lead me to an issue related to the Tab function that is setting something odd.

2 - If I click the same tab multiple times, it creates multiple versions of the search window and multiple versions of the pageation.

I've looked it up, but I can't seem to figure out how to add an example to include MySql database reads. Do you happen to have an example of how I can add database reads?

Thanks

Gstg

If I can figure out how to load up an example / test version with a test / demo MySQl I will put the example up. I'm still looking for how to create that type of test case on the demo site like was done above with the examples

kthorngren

This technote provides links to Datatables JS BIN templates using ajax requests and server side processing.

Kevin

kthorngren

If I click the same tab multiple times, it creates multiple versions of the search window and multiple versions of the pageation.

I've seen this asked on the forum before but didn't find much useful except this thread.

Kevin

Gstg

This is definitely not going to work because it has example PHP code in it to connect to MySQL, but I couldn't figure out how to post a test case connecting to a "test database". I hope this helps to at least show the code.

Even without the PHP code working all 3 issues can be seen with the posted example.

If you fill in the PHP connections with a fake data base connection, you will replicate the 3 issues more precisely. I think it has to do with the Tab script, since that "fixes" the formatting problem when you click the tab 2 times ... but it also causes the other problem that repeats the SEARCH box and Pageation multiple times. I suspect it has something to do with creating multiple instances of the API maybe?

1 - The formatting for the other tables other than the first tab don't seem to work until you click the Tab 2 times.

Even without the PHP code connecting you can see this by running it and then clicking on Tab 3 first ... it doesn't appear to have the DataTable formatted .. but if you click it again .. it WILL format it.

2 - If you click Tabs 2 or Tab 3 multiple times, it creates multiple versions of the search window and multiple versions of the pageation.

This is replicated in the example even without the PHP working

3 - A new issue is that ONLY Tabs 1-3 show up. For some reason when I tried to expand this to 5 Tabs the 4th and 5th Tab didn't work.

This is also replicated even without the PHP code working and can be seen.

I really appreciate all the time you have spent helping on this issue. It has been VERY helpful and this appears to be the last stumbling block (fingers crossed).

Thanks again

http://live.datatables.net/zezipaye/1/edit?html,js,output

kthorngren

You are getting this error:

datatables.min.js:95 Uncaught TypeError: Cannot read property 'aDataSort' of undefined

The problem is you are creating two table tags for each table except the first. This is creating duplicate id's. I commented out the duplicate for ab2 and Tab3, look in the HTML tab.

I noticed, when inspecting the web page, Tabs 4 and 5 are under the div for Tab3. I added this console.log statement so you can see what is happening:

console.log($('#' + tabName).find('table'))

When clicking on Tab1 and Tab2 you will see there is only one table found. However when clicking on Tab3 you will see table 3 is found once but 4 and 5 are found twice. One set of 4 and 5 are due to the extra table tag. The other is due to those tables being under the Tab3 div. Move those so they are at the same level then everything should work.

Updated test case:
http://live.datatables.net/zezipaye/2/edit

Kevin

Gstg

That was awesome. Thanks again. I had just missed the closes on the

<

div>s for the Tabs 3, 4 and 5. And had missed that 2nd table ID. I also didn't know about the console debugging. I'm going to use that in the future. I'm a programmer, but have never done any work with JS, PHP, HTML or CSS before. This is my first project. Everything appears to be working. Now on to implementing the editor. haha

Thank you again.

Lapointe

Hi @all

Do you think there is a way to use tabs in editor... on same record of course, like for many columns table, grouping inputs in tabs ?
Tabs in editor or editor(s) in tab ?

Bob

Gstg

I am trying to implement in-line editing, but so far have been unsuccessful. I suspect it is my lack of familiarity with the editor so far and JS in general. I think I'm either double defining the table in the JS or something else odd atm. This is my last stage on the tables. They are now working great in the tabs with kthorngren's great help.

http://live.datatables.net/zocacinu/1/edit?html,js,console,output

colin

Your code looks ok, but as it's not running, it's hard to debug your issue. This example here shows inline-editing. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

Gstg

I tried copying the code in the example directly to a PHP file, but it doesn't seem to work. I'm wondering what the "?_=9a6592f8d74f8f520ff7b22342fa1183" does in this line?

I'm trying to get any static inline editing to work and then I can start changing out code to maintain the inline editing.

Thanks again for all the assistance.

kthorngren

what the "?_=9a6592f8d74f8f520ff7b22342fa1183" does in this line?

This is for cache control when using an Ajax GET request. This is from the jQuery ajax() cache docs:

If set to false, it will force requested pages not to be cached by the browser. Note: Setting cache to false will only work correctly with HEAD and GET requests. It works by appending "_={timestamp}" to the GET parameters. The parameter is not needed for other types of requests, except in IE8 when a POST is made to a URL that has already been requested by a GET.

Do you get errors in the browser's console when trying to inline edit?

Kevin

Gstg

Hmm. Any clue on why this exact code does not work on my system?

Is it because of the

"https://nightly.datatables.net/..."

Is this a local resource that doesn't work outside of this website?

I've tried replacing them with my local copies of the resources, but it still does not appear to work. It neither makes the tables nor allows inline editing (which I assume is because of the DataTables themselves not working.)

Thanks

colin

No, the nightly builds are available externally too. The string on the end of the URL is to avoid caching as Kevin. Try doing a Ctl+F5 on the page, or changing that string, that should work,

Colin

kthorngren

Take a look at the browser's console (not the JS BIN Console). You will see lots of errors regarding loading JS and CSS files. Either use the example Colin provided or replace the JS and CSS includes from Colin's into your example. Your example is loading some out of order and others don't have the correct syntax or is pointing to a local path on your system.

Any clue on why this exact code does not work on my system?

What happens on your system? Do you get errors in the browser's console?

It looks like you are trying to use PHP to fetch and build your table and also trying to have Datatables fetch the data via ajax. I would remove the PHP stuff and just provide the basic table structure as shown in this example. Click on the HTML table to. see the table. Using both PHP and ajax might be causing conflicts and errors with inline editing.

Kevin

Gstg

I must be missing something. I'm using Colin's example, but I on my side it fails to create the table? But when I load it into the "example" page here it works? What am I missing? Is there a reason the code only works on the example? I'm thinking it has to do with the local DataTable creation?

http://live.datatables.net/danefude/1/edit?html,output

kthorngren

Have you looked for errors in your browser's console?

You are using PH to build your HTML. Make sure its building the page properly. You can use the W3C Validator to verify the generated page.

The example you linked to seems to work. Is it showing the issue you are having? If so please provide the steps to see the issue.

Kevi

Gstg

The exact code I linked is stored as a Test.php file that I put on my server to test it. That server has lots of other tables from DataTables working including the multiple tabs / multiple tables.

This one produces the following

It doesn't appear to activate the DataTable.

If you just take the code and name it as a PHP file and run it, does it work on your end?

Thanks

colin

Can you link to it again, please. The examples I see that you provided have code in the JS, CSS and HTML tabs, so they can't be saved as a single PHP file. It would be easier for us to debug if you could tweak the example that I provided to demonstrate your issue, that way we can all debug online and be looking at the same code (no PHP versions affecting anything),

Colin

Gstg

http://live.datatables.net/danefude/1/edit?html,output

kthorngren

As asked before:

The example you linked to seems to work. Is it showing the issue you are having? If so please provide the steps to see the issue.

Kevin

Gstg

If I take the example shown. Copy and paste it into a text file named test.php then load it onto our web server which is running other DataTables, the results are:

It doesn't create a table, nor editable.

If you copy and paste the code from the example into a test.php file and run it, are you getting an editable table?

kthorngren

It doesn't create a table, nor editable.

Have you looked at the browser's console for errors?

Kevin

Gstg

Uncaught TypeError: $.fn.dataTable.Editor is not a constructor
at HTMLDocument.<anonymous> (Profile_test.php:37)
at j (jquery-1.11.3.min.js:2)
at Object.fireWith [as resolveWith] (jquery-1.11.3.min.js:2)
at Function.ready (jquery-1.11.3.min.js:2)
at HTMLDocument.J (jquery-1.11.3.min.js:2)

Gstg

I added this line in, because it seemed like it was missing:

<s.cript src="/DataTables/_user/1/site.js.download"></s.crip.t>

And I now get this error with the same results ...

Profile_test.php:38 Uncaught TypeError: $.fn.dataTable.Editor is not a constructor
at HTMLDocument.<anonymous> (Profile_test.php:38)
at F (site.js.download:109)
at Object.fireWith [as resolveWith] (site.js.download:110)
at Function.ready (site.js.download:114)
at HTMLDocument.Ta (site.js.download:33)

kthorngren

You can search the forum for the error. There are lots of threads discussing what to do like this thread. Looks like you need to download and load the Editor from a local resource instead of using the CDN.

site.js.download

I don't know what this is. Its something specific to your site.

Kevin