Opt for utilizing local data table files instead of relying on a content delivery network (CD

I'm in the process of minifying the CSS in my project and am looking to replace CDN files with offline files.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>
<link href="https://cdn.datatables.net/responsive/2.0.0/css/responsive.bootstrap.min.css" rel="stylesheet"/>

The first URL also includes twitter-bootstrap, which is already on the page. I've attempted to replace the CDN styles with the following from the datatables Download Builder page:

<link rel="stylesheet" href="css/jquery.dataTables.css"/>
<link rel="stylesheet" href="css/dataTables.bootstrap.css"/>
<link rel="stylesheet" href="css/responsive.bootstrap.css"/>

However, I'm having trouble getting the styles to apply correctly. Are these the appropriate styles to include, or should I add any other CSS files?

jquerycsstwitter-bootstrapdatatables

Answer №1

Access the URLs in a web browser

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>
<link href="https://cdn.datatables.net/responsive/2.0.0/css/responsive.bootstrap.min.css" rel="stylesheet"/>

Copy all the text

Save the text as a CSS file

Link to the CSS file

<link rel="stylesheet" href="theplacewhereistored/that.css"/>

If you downloaded the files and the links are not working, check if you are pointing to the correct location by making the path relative to the domain root by adding a "/"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Focusing on the initial element following CSS prioritization

Check out this codepen link: http://codepen.io/muji/pen/XpEYzO I am looking to target the first element after it has been sorted using a CSS "order" property and apply another CSS property to it. Is there a way to use jQuery or any other method to identi ...

javascriptjquerycss

Using jQuery to combine the values of text inputs and checkboxes into a single array or string

I need to combine three different types of items into a single comma-separated string or array, which I plan to use later in a URL. Is there a way to merge these three types of data together into one string or array? An existing POST string User input f ...

javascriptjquerystringcheckboxinput

The error message "GetListItems is not defined" indicates that the function is not recognized

I am currently working on a project in SPFx using React, where I need to retrieve SharePoint list items that exceed 5000 through a REST call. Everything seems to be going smoothly until an error occurs during the next iteration process, displaying this me ...

jqueryreactjsajaxsharepoint

Having trouble incorporating custom CSS into my Rails/Bootstrap project

I’m having trouble figuring out what I’m doing wrong. I’ve added custom files and tried to override the existing ones. application.css.scss @import 'bootstrap-sprockets'; @import 'bootstrap'; /* * This manifest file will be co ...

cssruby-on-railstwitter-bootstrap

The height of each list item should expand based on the size of the div contained within it

The HTML markup I am working with looks like this: <ul data-role="listview" data-inset="true" class="stuff site-content lists"> <li> <div class="nearby"> 20 </div> <h1> name</h1> </li> ...

htmlcss

a new webpage beginning from a different location

Starting from scratch here, I must apologize for not providing any code upfront. The issue at hand is this - I've got a page full of information sorted by ID (retrieved from the database). These IDs are linked from another page where users can click ...

htmlcss

Display a block by using the focus() method

My objective is : To display a popin when the user clicks on a button To hide the popin when the user clicks elsewhere I previously implemented this solution successfully: Use jQuery to hide a DIV when the user clicks outside of it However, I wanted to ...

javascripthtmlcss

What is the process for changing the color of my input fields to black and text to blue?

<form method="post" action="https://ip/form.php"> First name<br> <input type="text" name="fname" value=""><br> Email Address:<br> <input type="text" name="email" value=""><br> Phone: <br> <input type="text ...

htmlcss

Removing an Element According to Screen Size: A Step-by-Step Guide

Currently, I am facing a dilemma with two forms that need to share the same IDs. One form is designed for mobile viewing while the other is for all other devices. Despite using media queries and display: none to toggle their visibility, both forms are stil ...

javascriptjquerycsswebmedia-queries

Guide on effectively sending a secondary parameter in an ajax request

Struggling to implement a year/make/model multi-select feature, I have managed to get the scripts working. However, what appears to be missing is the ability to pass both a year and make variable together in order to fetch the final model results. Below a ...

javascriptphpjqueryajax

What is the best way to expand the width of my Bootstrap 4 navbar dropdown menu?

Need help creating a full-width dropdown for a Bootstrap 4 navbar using the standard boot4 Navbar? Check out the navbar template I am currently working with. Here is an example of how I want it to look: Desired design image link <nav class="navbar fix ...

htmlcssbootstrap-4

Guaranteeing the sequential execution of JavaScript functions

For weeks, I've been struggling with a program that utilizes ajax post methods and dataTables. It has become clear to me that my understanding of how javascript operates is lacking. Below is the javascript code: $('#SaveTimeSheet').click(fu ...

javascriptjqueryajaxmodel-view-controllerdatatables

What is causing my JS/JQuery code to only function in the console of a web browser?

I am having trouble with the $(element).scroll(function(){}); function. When I put it into a js file, it does not work properly, but when I enter it directly into the console (just the scroll func), it works fine. My goal is to implement scrolling paginat ...

javascriptjqueryhtmlpaginationscroll

Lately, I've been working on a practice website I'm developing, and I'm facing some issues with my hyperlinks

Get the omisphere download I created this hyperlink because my previous attempts didn't work, but unfortunately, this one still isn't functioning properly. Is it possible that the issue is with my CSS? ...

htmlcss

Display/Conceal a div using CSS in React JS/Redux

I've been working on a CSS toggle for a div with className toggling. My approach involves using redux to manage the boolean state. Using the redux chrome extension, I can see that the state is indeed changing but the div remains invisible. If you have ...

javascriptcssreactjsreact-redux

Learn how to implement icons within Textfield components using Material-UI and TypeScript in React

I have successfully created a form with validation using TypeScript Material UI and Formik. Now, I am looking to enhance the visual appeal by adding a material UI Icon within the textfield area. Below is a snippet of my code: import React from 'reac ...

cssreactjstypescriptmaterial-uiformik

When I type text into the form field, JavaScript causes a disruption in the form

I'm attempting to implement a dual-stage user onboarding procedure. Initially, users will input the industry they belong to and then provide a description. Upon clicking submit, my intention is to conceal that portion of the form and reveal the "Creat ...

javascriptjqueryruby-on-railsforms

Using Bootstrap Confirmation with an Ajax call is not functional

Can you help me identify the potential issue? I have a service that returns JSON data, which I use to populate my table. When I hardcode the data, the plugin works fine as shown in the code snippet below: <td><strong>April Invoice</strong& ...

phpjqueryajaxtwitter-bootstrap

Eliminating unnecessary gaps caused by CSS float properties

I need help figuring out how to eliminate the extra space above 'Smart Filter' in the div id='container_sidebar'. You can view an example of this issue on fiddle http://jsfiddle.net/XHPtc/ It seems that if I remove the float: right pro ...

javascripthtmlcss

What could be causing the appearance of sha256.js when making an AJAX request to a PHP script using jQuery?

Currently, I am executing a script that saves modifications to a PHP script in the background using jquery-ajax. Additionally, I have implemented a function that triggers an error if the script attempts to post something on the site. In case of an error, I ...

javascriptjqueryajaxgoogle-chromesha256