Datatables CSS not functioning?

somma_matt

Hey all,

First of all I love this plugin. It's totally saved me.

I'm working on an inventory tool for work and have been utilizing data tables. Up until a few minutes ago it was working fine. Now it is only formatting half the page and I can't figure out what the deal is.

Link to the page is www.mattsomma.com/ilt/blanks.html
I'm using HTML import for all of the source files which is located at www.mattsomma.com/ilt/imports.html

Functionality still works just fine even for things that don't look like links or buttons. I've tried everything I can think of!

allan

The console in my browser shows a lot of errors (attached image).

It looks like you aren't loading DataTables core.

I'd suggest using the download builder to make sure that everything you need is loaded and in the right order.

Allan

somma_matt

Hi Allan,

Thanks for the resource. I used the builder and updated my imports.html file with it but now nothing is loading. Any thoughts?

somma_matt

The plot thickens. When I load everything else in imports.html but then I load just the datatables CSS in my main file it works fine?

allan

Have you managed to resolve this now? The page appears to work okay for me and there is styling information present.

There is still a jQuery Mobile error being caused by something, but the table appears to work okay.

Allan

somma_matt

Hey Alan,

It's still not working. See screenshot. It styles up until the buttons but the table isn't styling. Also if you look below none of the pagination is styling even though it's functional. I haven't touched the CSS document itself as I'm pulling from the CDN, just making a call to it in an imports file.

somma_matt

Screenshot

allan

This is what it looks like for me - Chrome 52 Mac.

Allan

F12Magic

I see you're loading jQuery 3.1.0. Is DataTables compatible with this version???
There are a lot of changes in comparison with version 2. See Upgrade Guide

allan

I see you're loading jQuery 3.1.0. Is DataTables compatible with this version???

Yes.

If you use the migrate plug-in you will get a warning because the current release uses $().bind(). It will still work though, and the nightly version of DataTables uses the newer API methods. It will be released as 1.10.13 soon. However, as I say, the current release works with jQuery 3.1.0.

Allan

somma_matt

Hey Alan,

Styling stops at the top of the table. You'll notice it's not styled like a normal datatable with the column headers etc.

Also pagination isn't styled at the bottom of the page if you scroll down. You can click the text and it's still functional but it doesn't show up as a button.

allan

The pagination looks absolutely fine for me in Chrome. What browser are you using?

Allan

somma_matt

Chrome see screenshot

allan

Chrome 52 Mac attached.

Firefox doesn't look so good. What happens if you dispense with the <link rel="import" href="imports.html"> and just include everything on the page? To be honest, I've never see that approach before.

Allan

somma_matt

Hey Allan,

Taking a different approach here. Seems as I dug into datatables more I realized that there were better approaches. Take a look at

www.mattsomma.com/ilt2/blanks.html

I'm using Papa Parse to parse a csv table with headers and return it as an array then I'm calling in DataTables. Console shows that the array is pulling in correctly and my datatable is rendering but no data pulling in. Any thoughts?

allan

Yes. Youa re using:

data: csvdata,

But should be using:

data: results.data

like you do in your console.log statement.

somma_matt

Ahh ok. I had loaded the parser in the beginning into a variable so I thought I was just calling that variable.

so it's populating now but I got 2 errors. SS attached.

Thank you for all your help

allan

The error means exactly what it says :-). Row 1230 doesn't have the property Color. If that is expected, use columns.defaultContent to set a default value for columns which don't have a value.

somma_matt

Very peculiar. My CSV file actually goes to 1231 with Headers included. My parser (papa parse) has a config for defining headers. Would it be better for me to maybe delete the top row, remove that definition and have DataTables define my row headers?

How would I go about the column headings then? (as they aren't showing up now)

somma_matt

(which can be viewed at mattsomma.com/ilt/importdata.csv if that helps)

somma_matt

Ok...progress.

Deleted the headers and got rid of that argument so I just have arrays. Now I get the very similar error

somma_matt

Huzzah. I set default content for all my columns to null and no errors, but now I have an empty row sitting at the top of my page

somma_matt

Never mind, I'm an idiot. I'll mark this as answered. Great tool, I'm so glad I found it!

mightz1986

deleted