The desired jQuery datatable theme did not take effect on the JSP page

Experimenting with various JQuery themes and controls. Attempting to use a datatable example and apply the default theme provided here. However, I have been encountering difficulties.

Seeking assistance to understand the root cause of this issue. Also, included a screenshot of the page for reference.

<%-- 
Document   : ctsUserRegistration
Created on : Dec 13, 2015, 11:02:12 PM
Author     : nishad
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>User Registration</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/sb-admin.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">


    <style>
        div.dataTables_wrapper {
            width: 1100px;
            margin: 0 auto;
        }
    </style>
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>

</head>

...

JSP Form screen shot

javascriptjquerycssjspdatatables

Answer №1

    <!DOCTYPE html>
    <html>
    <head>
            <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
            <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/dataTables.jqueryui.min.css">
            <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"> </script>
            <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
            <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.10/js/dataTables.jqueryui.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#data-table").DataTable({columnDefs:[{targets:[0, 1, 2, 4, 5], width:"300px"}]});
                }
                    );
            </script>
    </head>
    <body>
        <div style="width:76%">
            <table id="data-table" class="display" cellspacing="0" >
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>

                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </tfoot>

                <tbody>
                    <tr>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                        <td>61</td>
                        <td>2011/04/25</td>
                        <td>$320,800</td>
                    </tr>
                    <tr>
                        <td>Garrett Winters</td>
                        <td>Accountant</td>
                        <td>Tokyo</td>
                        <td>63</td>
                        <td>2011/07/25</td>
                        <td>$170,750</td>
                    </tr>

                </tbody>
            </table>
        </div>
    </body>
    </html>

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

Centralizing images in a Facebook gallery/lightbox during the loading process

Is the image width and height stored in Facebook's gallery database? In typical JavaScript usage, the image width and height cannot be determined until the image is fully loaded. However, on Facebook, images are pre-loaded before being displayed, ens ...

javascriptcssfacebook

Unable to resolve the issue within Angular UI modal

Currently, I am facing an issue with displaying a modal using Angular Bootstrap UI. The modal is supposed to resolve items in the controller, but I am struggling to access those resolved items in the modal controller. $scope.showItemsInBill = function(bill ...

javascriptangularjstwitter-bootstrapangular-ui-bootstrapbootstrap-modal

Ways to retrieve an element from an array

I need help finding the right way to retrieve the value of the message "Meeting 9943...is not found or has expired". Here's what I tried: if (response.data.status == 404) { angular.element(document.getElementById("msg")).css("color", "red"); ...

javascriptarraysangularjs

Execute a PHP script upon button click without the need to refresh the page

I'm facing an issue with integrating PHP and JavaScript. Objective: To execute a .php script when the event listener of the HTML button in the .js file is triggered without causing the page to reload. Expected outcome: On clicking the button, the PH ...

javascriptphphtmljquery

How can nextJS leverage async getInitialProps() method in combination with AWS S3?

I'm currently facing a challenge with executing an s3.getObject() function within an async getInitialProps() method in a nextJS project. I'm struggling to properly format the results so that they can be returned as an object, which is essential f ...

javascriptnode.jsreactjsamazon-s3next.js

Error: JSON parsing stopped due to unexpected end of file while attempting to parse data

After testing with other APIs successfully, I found that this particular one is not functioning as expected. const express = require("express"); const https = require("https"); const bodyParser = require("body-parser"); const ...

javascriptnode.jsapiexpresshttps

What specific version is indicated by the @next tag for npm packages?

Which version of the foo package will be installed by running this command? npm install foo@next Neither the package.json nor the semver documentation make reference to the use of next. ...

javascriptnpmnpm-installsemantic-versioning

Using React's useEffect to implement a mousedown event listener

I created a modal that automatically closes when the user clicks outside of it. method one - involves passing isModalOpened to update the state only if the modal is currently open. const [isModalOpened, toggleModal] = useState(false); const ref = useRef(n ...

javascriptreactjs

The issue with dynamic sizing in React and Tailwind is that it does not consistently work with arbitrary sizes. Some sizes do not appear properly, causing items to

In this code snippet, I am attempting to create a circle component of dynamically sized using html div and Tailwind CSS w-[diameter] & h-[diameter] attributes in a create-next-app@latest project. However, the circle fails to render properly with certa ...

javascripthtmlreactjsnext.jstailwind-css

Conceal the element if the output of express is void

I am currently developing an app using nodejs and express. I am retrieving JSON data from an endpoint and displaying it on the page based on the values received. The issue I am facing is that if I receive a null or undefined value from the JSON data, how ...

javascripthtmlnode.jsexpresshbs

The HTML code may fade away, but the JavaScript is still up and running behind the

Switching between different div elements in my HTML document is a challenge. Here's the code I currently have: <div id="screen1" class="current"> <div id="press_any_key_to_continue"> <font style="font-family: verdana" color="yellow ...

javascriptjqueryhtmlthree.js

What is the significance of the exclamation point before and after in JavaScript?

Currently collaborating on a project and attempting to decipher the significance of the exclamation marks both before and after. import ICHING from '!json!constants/iching_deoxy.json'; ...

javascriptreactjs

problem with the video pathway in the javascript document

I'm currently in the process of putting together a Video gallery playlist using HTML, CSS, and JavaScript. So far, I've set up the html and css files along with two js files. The first js file contains all the video information as shown here: ...

javascripthtmlcss

Use jQuery to activate the radio button inside a div whenever it is triggered by a change

How can I check which radio button list is clicked and then send a jQuery ajax call for the clicked item? Currently, I have tables with the IDs plan1, plan2, plan3 generated using PHP. Each table has a radio button list. Using jQuery each, how can I achiev ...

javascriptphpjqueryajaxradio-button

Ensuring that the redirect URL functions properly with AJAX

Can you guide me on how to implement an ajax request in my views that redirects the user to another page after a successful email submission? For instance, when a user submits their email successfully, I want to redirect them to another page. How can I ach ...

jqueryajaxdjangodjango-views

Create a parent dropdown class that contains two separate bootstrap dropdowns nested within it

I am encountering an issue with my dropdown menus. I have 2 dropdown menu items under the same parent dropdown class. However, when I click on dropdown action 1, it displays the body of dropdown menu 2 items instead. <!DOCTYPE html> <html> < ...

javascriptjquerytwitter-bootstrapdrop-down-menu

I'm currently exploring jqgrid with jquery and I'm curious about how to modify the URL for my AJAX request. Can anyone provide

After following the tutorial and successfully implementing it with my data, I realized that the code is set up in a hard-coded manner. For instance, in the working tutorial, the code snippet is as follows: jQuery(document).ready(function(){ jQuery("#li ...

jqueryjqgrid

What steps should I take to develop an Outlook add-in that displays read receipts for action items in sent emails?

Currently, I am in the process of developing an add-in that will enable me to track email activity using a tool called lead-boxer (). With this add-in, I am able to retrieve detailed information about users who have opened my emails by sending them with an ...

javascriptoutlook-addinoffice-addinsoutlook-web-addins

Transforming a Bootstrap 4 HTML project into Angular 9

After stumbling upon a beautiful HTML template that caught my eye, I realized it was built using Bootstrap. Luckily, I came across tutorials on how to convert such templates into Angular 6 projects, making the process seem quite straightforward (like this ...

cssangularbootstrap-4

Arranging elements in an array based on two different properties

Trying to organize an array of elements (orders details). https://i.stack.imgur.com/T2DQe.png [{"id":"myid","base":{"brands":["KI", "SA"],"country":"BG","status":&qu ...

javascriptarraysvue.jsgroup-by