Search code examples
javascriptjquerycssdatatablesasp.net-mvc-5

I'm using a DataTables plugin for my ASP.NET MVC program. The table displays without any CSS. Why?

I have been troubled with this problem for DAYS, and this is a last resort.

I am following along with a course, and in it the instructor has us use DataTables to pull a list of users from a database. The plugin is pulling data from my db correctly, and the functionality of the table seems to be working. The problem is that the table is hideous, and virtually unusable.

Table that lists the viewers

I'm at a loss, as I have made sure my code mimics everything from the video lesson. I've even analysed my code next to his in GitHub.

I've even made sure to use his version numbers for plugins, as the course was recorded in 2016-2017 I believe. I have considered the fact that I'm using Visual Stdio 2019, and he is not. Also, I remember there being a large bootstrap update as recently as a couple years ago. (DataTables uses bootstrap)

I'll show some code below, but here are both repos for this project(Vidly): My Repo | Instructor's Repo

Since this is apparently a CSS problem, I looked to how I was importing my css files. I am using a bundle inside of the BundleConfig file in the App_start folder:

BundleConfig file

But it's exactly the same as the instructor wrote it, identical.

Lastly, here's the code in relation to the first image, the page with the table in question:

The HTML Markup

The script

I am lost.

EDIT: Last night I was messing with my included files in the BundleConfig file and switched the dataTables to bootstrap 4 and got a more desirable result:

New Table after bootstrap 4 implementation

As you can see, this is definitely laid out better, and has the desired dimensions, but the colors of the hovered rows and certain text is still off and unappealing.

Solution

  • If your Bootstrap version is 4, then you need to load in the *.bootstrap4.css / *.bootstrap4.js files for DataTables (rather than *.bootstrap.* which is for Bootstrap 3).

    Update for the edit

    Looks like you might also be loading the jquery.dataTables.css file (the tell is the gaps in the pagination)? You can remove that. Only one of the style files should be loaded.

    What is the tutorial that you were following btw?