Enhance your data tables with responsive design by incorporating side panels on either side

In this example, I have created a basic datatable table using JavaScript. The functions to open and close the panels are easily defined, and the data for the table is specified using a JavaScript variable.

The CSS is used to style the left and right panels (sidebarLeft, sidebarRight) so they appear in their respective positions with specified colors. Additionally, styles for the close buttons (closebtnLeft, closebtnRight) are added.

Finally, in the HTML section, the left panel, main container holding the table, and right panel are included.

With sufficient screen size, pressing either the left or right panel button does not affect the responsiveness of the table, which maintains its original size before the panels were added.

View sizing issue in the table here

JavaScript code goes here...
CSS code goes here...
HTML code goes here...

When the left or right panels are added and the table size is insufficient to display all information, the table adjusts accordingly to show the responsive mode for mobile devices.

See attached photo illustrating the desired outcome

Answer №1

Make sure to recalculate the responsive widths after any changes in the navigation menu

table.responsive.recalc()

var table;
$(document).ready(function() {
    table = $('#example').DataTable( {
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ],
      "searching": false,
      "lengthChange": false,
      "responsive":true
    });
});

function recalc() {
  table.responsive.recalc();
}

function openNavLeft() {
  document.getElementById("mySidebarLeft").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  recalc();
}

function openNavRight() {
  document.getElementById("mySidebarRight").style.width = "250px";
  document.getElementById("main").style.marginRight = "250px";
  recalc();
}

function closeNavLeft() {
  document.getElementById("mySidebarLeft").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
  recalc();
}
function closeNavRight() {
  document.getElementById("mySidebarRight").style.width = "0";
  document.getElementById("main").style.marginRight= "0";
  recalc();
}



var dataSet = [
    [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
    [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
    [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
    [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
    [ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
    [ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
    [ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ],
    [ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ],
    [ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ],
    
];
.sidebarLeft {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebarRight {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebarRight .closebtnRight {
  position: absolute;
  top: 0;
  left: 25px;
  font-size: 36px;
  margin-right: 50px;
}

.sidebarLeft .closebtnLeft {
  position: absolute;
...
</script>

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

Send text and image data to a Laravel Controller using Ajax submission

Utilizing Laravel 7 and jQuery v3.4.1 I am attempting to utilize Ajax to send the form content containing a text field and a file field to a Laravel Controller in a single request. Despite successfully sending the content, Laravel seems unable to interpr ...

Incorporate a Background Using PHP

There is a form on my website that includes a drop-down menu like this: <select name="status" class="form-control" style="width:100px; float:left;"> <option value="0" <?php if($status == 0)echo 'selected="selected"';?>& ...

Unable to generate a navigation panel using HTML/CSS and jQuery

I recently completed the basic courses in HTML/CSS, JavaScript, jQuery, and PHP on Codecademy. I'm currently working on creating a website using HTML/CSS and jQuery in Codecademy's codebits. However, I'm facing some issues with my navigation ...

Setting up a server in Node.js and establishing a connection

Here's a code snippet to consider: var server = net.createServer(function(socket) { //Code block A socket.on('connect', function() { //Code block B }) socket.on('data' , function (data){ //Cod ...

Dynamic Rendering and Retrieving Component HTML in Angular

Generate the HTML code of a component to open a new tab with an about:blank page. Reason: This method helps avoid creating HTML using string variables, such as: var html = '<div> <h3>My Template</h3> &a ...

Alignment Troubles with Icons

I am having trouble positioning some icons on the far right of my 960 grid template header, next to my logo which is on the far left. I have tried multiple ways but can't seem to get it right. Any assistance would be greatly appreciated. Below is the ...

Ways to initiate a CSS transition without hovering over it

Currently, I have a sidebar that is hidden and only shows up when the mouse hovers over it. I'm wondering how I can make the CSS transition trigger before the mouse hover, similar to what happens in this sidebar link: . Any advice on how to achieve th ...

Sending information (prop) from _app.js to getServerSideProps in a page on the most up-to-date version of NextJS

I have a unique custom _app.js that I created: const CustomLayout = ({ children }) => (children); const myApp = ({ Component, pageProps }) => { pageProps.url = 'another url'; return ( <CustomLayout> <Co ...

Issues with CSS preventing proper display on mobile devices like iPad and iPhone

My designer recently converted a PSD file, but for some unknown reason, the webpage is not displaying correctly on iPhones or iPads. The only visible element is the div that contains a feedback link. I have been troubleshooting this issue for a while now ...

Is there a way to slow down the falling effect on my navigation bar?

As I was working on my personal website, I had a creative idea to add a falling-down animated effect instead of keeping the layout fixed. Utilizing bootstrap for navigation, I encountered some difficulty in controlling the speed of the falling effect. Any ...

Having a problem with configuring the request headers for my AJAX request

Currently, I am attempting to initiate an ajax call to a service. The service API requires a Request Header for Authorization in order to provide a response. Below is the code snippet that I am using: var settings = { url: "http://localhost:8080/c ...

A Guide to Handling Errors while Converting a Map to a Promise in Typescript

I am attempting to capture errors if any of the asynchronous code within my map function fails. It seems to enter the error block but does not log anything, as the error variable remains null. Is there an alternative method for handling errors within map ...

Implement a select element with an onchange event that triggers an AJAX

As a newcomer to Javascript, I've been struggling to find a solution to my issue. The goal is to add an additional select option when the previous select option is changed. I attempted to implement the code below, but it's not functioning correct ...

Retrieve data from an HTML table with the power of jQuery

I have a table with the following structure. <form id="myform"> <table> <tr><th>TEST</th> <th>VALUES</th> <th>UNIT</th> <tr><td>Abc</td><td><input type="text" & ...

Instructions on utilizing clean-css with Node.js to process incoming requests

I need help finding a way to pipe request output into clean-css for minification and then return it as a response. The application I am working on is using restify framework. Here is an example of what I'm trying to accomplish: var url = "http://www ...

Meteor: Transforming MongoDB server logic for the client's use

Although I can successfully retrieve data from the meteor mongo terminal using this code, I am struggling to fetch data from the client side. I realize that the syntax for the client side is different, but being new to this environment, I am unsure of ho ...

"422 (Unprocessable Entity) Error When Submitting a Form in Rails Application

I recently delved into the world of ruby on rails a few days back. My current challenge involves transferring data from html tags to a ruby function using ajax. Below is the error message that has been giving me trouble: POST http://localhost:3000/ajax/o ...

Adding the same block of code to an event in Node.js: Best practices

My preferred tech stack for real-time user synchronization includes Node.Js with Express and Express HBS (Handlebars), as well as Socket.IO. For example, when creating a web chat application, I emit an event from the client to the server each time a user ...

How does one make sense of comparing integers with strings and arrays?

I was experimenting with the == operator in Javascript, and the results were intriguing: 0 == "0" // true and then 0 == [0] // true BUT: "0" == [] // false It's quite perplexing for someone unfamiliar with Javascript like me. I also observed: ...

The media query targeting a specific max-width and below appears to be malfunctioning

So, I'm experiencing an issue where the browser I'm using doesn't seem to be picking up the styles I've set for a max-width of 960px and below. Can anyone provide insights into what might be causing this? Any assistance would be highly ...