Some design elements are present in the interface. The functionality of the data tables is working properly, however, upon reloading the page, the table header shrinks. Interestingly

[![enter image description here][1]][1]

This is the JavaScript code along with my footer and header references. The issue I am facing is with the design - initially, it shows a buggy design but when I click on the header, it displays the correct design.

<link rel="stylesheet" href="~/css/bootstrap.min.css" >
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&display=swap" rel="stylesheet">
<!--fontawesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.min.css" rel="stylesheet" />

<link rel="stylesheet" href="~/font/font/flaticon.css">
<link rel="stylesheet" href="~/css/StyleSheet.css">



$(document).ready(function () {
        $('#draft-data-table').DataTable({
            processing: true, // for show progress bar  
            serverSide: false, // for process server side  
            filter: true, // this is for disable filter (search box)  
            orderMulti: false, // for disable multiple column at once  
            "pagingType": "full_numbers",
            pageLength: 5,
            lengthMenu: [1, 3, 5, 20, 50, 100, 200, 500],
            deferRender: true,
            paging: true,
            scrollY: 200,
            scrollCollapse: true,
            scroller: true,
        });
    });
javascriptc#ajaxasp.net-coredatatables

Answer №1

Through research conducted on this issue, it has been determined that the problem arises from having vertical scrolling (scrollY) enabled without horizontal scrolling (scrollX) being enabled.

To resolve this issue when utilizing vertical scrolling without horizontal scrolling, it is recommended to enable the horizontal scrolling option to allow the table to scroll properly.

Once you have activated the scrollX option, include the following in your CSS stylesheet:

table.dataTable tbody th,
table.dataTable tbody td {
    white-space: nowrap;
}


$(document).ready(function () {
       var table = $('#draft-data-table').DataTable({
            processing: true, // for show progress bar  
            serverSide: false, // for process server side  
            filter: true, // this is for disable filter (search box)  
            orderMulti: false, // for disable multiple column at once  
            "pagingType": "full_numbers",
            pageLength: 5,
            lengthMenu: [1, 3, 5, 20, 50, 100, 200, 500],
            deferRender: true,
            paging: true,
            scrollY: 200,
            scrollX: true,
            scrollCollapse: true,
            scroller: true,
        });
    });
<head>
<!--Styles-->
<link rel="stylesheet" href="~/css/bootstrap.min.css" >
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&display=swap" rel="stylesheet">
<!--fontawesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.min.css" rel="stylesheet" />

<link rel="stylesheet" href="~/font/font/flaticon.css">
<link rel="stylesheet" href="~/css/StyleSheet.css">
<!--Scripts-->
<script src="~/js/jquery-3.5.1.js"></script>
<script src="~/js/popper.min.js" ></script>
<script src="~/js/bootstrap.min.js" ></script>
<script src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.min.js"></script>
</head>

An alternative solution would be to utilize the columns.adjust() method as detailed in the DataTables documentation found here.

This function recalculates the column widths of the table. It is important to call table.columns.adjust().draw(); after initializing your table.

$(document).ready(function () {
       var table = $('#draft-data-table').DataTable({
            processing: true, // for show progress bar  
            serverSide: false, // for process server side  
            filter: true, // this is for disable filter (search box)  
            orderMulti: false, // for disable multiple column at once  
            "pagingType": "full_numbers",
            pageLength: 5,
            lengthMenu: [1, 3, 5, 20, 50, 100, 200, 500],
            deferRender: true,
            paging: true,
            scrollY: 200,
            scrollX: true,
            scrollCollapse: true,
            scroller: true,
        });

table.columns.adjust().draw();
    });

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

Halt the program's process until the ajax request has finished

Struggling with what seems like a common issue of the "Asynchronous Problem" and finding it difficult to find a solution. Currently, I am working on a custom bootstrap form wizard which functions as tabs/slideshow. Each step in the wizard is represented b ...

javascriptjqueryajax

Create a captivating sliding effect on Windows 8 using a combination of CSS and JavaScript

I believe that using css3 alone can achieve this effect, but I'm struggling with understanding properties like 'ease' in css3. This is the progress I have made so far: http://jsfiddle.net/kwgy9/1/ The word 'nike' should slide to ...

javascriptjquerycss

Issues with invoking jQuery AJAX in Firefox extension is causing dysfunction

Take a look at my code snippet: $.ajax({ url: 'xxx', success: function(data) { if (data.trim() == '0') { //CODE FOR IF } else ...

jqueryajaxfirefoxfirefox-addonfirefox-addon-sdk

Ways to recycle a section of Javascript for multiple uses on a single page

As a newcomer to website building, I have a query regarding the usage of a JavaScript function designed for a slideshow. My one-page website comprises multiple slideshow units with their own divs, holders, and counters (e.g., 1/4). A JavaScript code contro ...

javascripthtmljqueryslideshowreusability

Tips for Refreshing User Controls that are Dynamically Added when the Add Button is Clicked

In a project that I am working on, there is a requirement to load user controls dynamically upon clicking the Add Button located in the Parent Page. These user controls consist of Text boxes, Dropdowns, and a remove button. The functionality to remove a sp ...

c#asp.net.netcustom-controlswebusercontrol

Is it possible to utilize setIn for establishing a fresh index on an array that is currently empty?

Having trouble using Immutable in this specific structure: myMap = Map({a: [], b: []}); myMap.setIn(['a', 0], 'v'); An exception is being thrown when trying to do this immutable.js Error: invalid keyPath at invariant (immutable. ...

javascriptreactjs

Struggling with generating an ajax request in Laravel?

I am currently learning about Laravel and working on creating an Ajax Registration form. However, I am encountering an issue with my ajax process not being able to access the URL. The error message I am seeing is as follows: XMLHttpRequest cannot load fil ...

phpjqueryajaxlaravel

What is the best method for displaying multiple slices within an SVG circle?

I'm currently working on a project involving a reactJS application. The goal is to display an svg circle that, when clicked, divides into n equal slices. I have successfully generated the individual slices with the following code: renderSlices = () ...

javascriptreactjssvgpath

The problem with the Next.js 14 generateStaticParamsparams parameter is that it is currently

I'm using this documentation as a reference to extract parameters from the URL in my generateStaticParams function: https://nextjs.org/docs/app/api-reference/functions/generate-static-params#generate-params-from-the-bottom-up This is the route I am w ...

javascriptnext.jsserver-side-rendering

Is there a way to define type information for a global variable when utilizing dynamic import within a function?

Here is a simplified version of my server code: server.ts import google from "googleapis"; const androidPublisher = google.androidpublisher("v3"); app.use('something', function(req, res, n){ ... }) ...(only one of the dozens of other meth ...

javascripttypescript

Every time I attempt to make an HTTP request, I encounter a cross-origin error

When I make requests from the browser, they are valid. However, when using the Angular 9 app, I receive a 401 error. Below is the header from Chrome: Request URL: http://localhost:1234/api/Common/GetMy_List Request Method: GET Status Code: 401 Referre ...

c#asp.netangularhttpcross-domain

Press on a specific div to automatically close another div nearby

var app = angular.module('app', []); app.controller('RedCtrl', function($scope) { $scope.OpenRed = function() { $scope.userRed = !$scope.userRed; } $scope.HideRed = function() { $scope.userRed = false; } }); app.dire ...

javascriptangularjs

`A dynamically captivating banner featuring animated visuals created with JQuery`

I am currently in the process of designing a banner for the top of my webpage, but I have yet to come across any code that meets all my requirements. To provide clarification, I have attached an illustration showcasing what I am aiming to achieve. 1) The ...

javascriptjquerycss

Is there a point in bundling NPM packages if they are ultimately going to be bundled by the project

I'm in the process of creating a TypeScript package for publication on NPM. My plan is to utilize this package in upcoming web development endeavors, most likely utilizing Vite. As I look ahead to constructing a future website with this module, I am c ...

javascripttypescriptnpmrollupvite

What is the return value of the .pipe() method in gulp?

When using the code snippet below, what will be the input to and output of .pipe(gulpIf('*.css', cssnano()))? gulp.task('useref', function(){ return gulp.src('app/*.html') .pipe(useref()) .pipe(gulpIf('*.js&apo ...

javascriptnode.jsnpmgulpnpmjs

Order the rows being inserted into a table by iterating through them using a foreach loop directly from the

I am currently working on a table that receives its data from a database. The table structure includes the typical header row, and then I use a foreach() loop to fetch information from an included file and display it in the table body (with a new row for e ...

javascriptphptablesorter

Issue with V-checkbox input-value not triggering correctly on change

Query Example: <query #[`${instanceItemIdKey}`]="{ item }"> <v-checkbox :input="item.content" @modify="$notify('onPermissionUpdate', item)" ></v-checkbox> </query> The information that influ ...

javascriptvue.jsvuetify.jsvuex

Using Ajax to Receive Data in a Separate JavaScript Function

I have a scenario where I am making an AJAX call in one function and attempting to capture the result in another function. Let me explain this in detail below: function myMain(){ var test = myWPackage(); alert(test); } function myWPackage(){ ...

javascriptajax

Validating the similarity of classes with JQuery

Currently, I am working on creating a quiz game using HTML, CSS, JQuery, and potentially JavaScript. I am looking to implement an if statement to check if a dropped element is placed in the correct div (city). My approach involves utilizing classes to comp ...

javascriptjqueryhtmlcssdraggable

When the model is replaced, the Vue.js directive v-html may fail to update

Upon running the code below (a Vue.js component), my expectation is that both the v-html directive and the console.log() will display the same value after the AJAX call returns. To my surprise, while v-html remains stuck at "loading...(1)", the value of o ...

javascriptajaxvue.js