Enhancing the appearance of jQuery datatables using Material Design Lite theme

I came across a helpful codepen demo demonstrating how to create a responsive data table with search filter and pagination. However, this demo is only integrated with Bootstrap. After searching the MDL discussion forum, I couldn't find any existing implementation of a MDL theme for this type of data table.

It seems like I will have to write the integration myself since there doesn't appear to be one available. Any guidance on how to integrate the dynamic html elements generated by jquery datatables would be greatly appreciated. One simple step would be to change the Search box theme from Bootstrap to MDL theme. Instructions on how to take that initial step would be very helpful. Once accomplished, I can then apply the same process to pagination and drop-down elements as well.

jqueryhtmlcssdatatablesmaterial-design-lite

Answer №1

Currently in the process of technical review, but it's worth noting that DataTables do come with an attractive MDL theme. See below for a simple example:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.material.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.0/material.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.material.min.css">
<section class="mdl-grid content">
  <div class="posts-container mdl-cell mdl-cell--12-col mdl-grid">
    <div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet
                  mdl-cell--12-col-desktop">
      <div class="mdl-card__title mdl-color-text--grey-800">
        <h2 class="mdl-card__title-text" id="users_list">Users List</h2>
      </div>
      <div class="mdl-card__supporting-text mdl-color-text--grey-600">
        <table id='users-activity-table' class="display">
          <thead>
            <tr>
              <th>Action</th>
              <th>User Name</th>
              <th>Time-stamp</th>
            </tr>
          </thead>
          <tbody id="usbody">
            <tr>
              <td> Login </td>
              <td> Mark Van-Helen2 </td>
              <td> Today </td>
            </tr>
            <tr>
              <td> Logout </td>
              <td> Mark Van-Helen </td>
              <td> Also Today </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>
<script>
  $(document).ready(function() {
    $('#users-activity-table').DataTable({
      columnDefs: [{
        targets: [0, 1, 2],
        className: 'mdl-data-table__cell--non-numeric'
      }]
    });
  });
</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

Encountering a challenge while rendering an Ajax partial using link_to to specify a controller action

I am facing an issue with rendering different partials into a div (id="content") on a "proposition" show page. The partial to be rendered depends on the selected tab at the top of the div. To achieve this, I have been attempting to use AJAX and the follow ...

ajaxruby-on-rails-3jquerypartiallink-to

Having trouble making alerts or confirmation dialogs function in JavaScript

EDIT: Many thanks to everyone who helped fix this issue (: Your help is greatly appreciated! I've been struggling to get the alert, confirm, or prompt functions to work properly in my code. Here's a snippet of the code that's causing troubl ...

javascriptjqueryhtml

Expanding the padding within a box results in an increase in the overall height of the table row that encapsulates it

My goal is to create a table displaying marks with a box around each mark that expands slightly when hovered over to indicate activity. Below is the code I am using: .container { position: absolute; width: 80%; left: 50%; transform: translateX(-5 ...

htmlcss

Challenges of relative positioning with dynamic height based on content

Hello! I'm trying to achieve this https://i.stack.imgur.com/Q6lXP.png In this case, there are 3 divs. The top one will have a width of 100% and a height of auto, with relative positioning. The second div is similar, but I plan to add some dummy text ...

htmlcss

There was a problem compiling the template and an error occurred in the mounted hook

I am encountering a slight issue with testing Vuejs and I am unsure how to resolve the error. Error1: "[Vue warn]: Error compiling template: Component template should contain only one root element. If you are using v-if on multiple elements, use v-e ...

htmlvue.jsvuejs2

What CSS property can be used to make short words wrap to the next line?

Is it possible to automatically identify if a line of text ends with a short word and then move it to the next line, so that the text flows smoothly? This would ensure a more organized layout. For instance, I envision the following text: Cascading Style ...

htmlcss

Using a Node.js module to shrink HTML files

Is there a way to minify HTML before rendering it? I'm aware of console minifiers like: html-minifier However, I am looking for a solution that can be implemented in the code itself. Something along the lines of: var minifier = require('some- ...

javascripthtmlnode.jsminify

How can I ensure a header is displayed on each page by utilizing CSS or JavaScript/jQuery?

On a lengthy page with approximately 15 pages of text, I would like to insert a header at the beginning of each page when the document is printed by the user. Can this functionality be achieved using CSS or JavaScript/jQuery? ...

javascriptjquerycss

Is it possible to include more details in the document?

Is it possible to include additional metadata, such as a record ID, within a file without causing corruption? I am looking for ways to add extra information to files. Can anyone offer some guidance? Your help would be greatly appreciated. Thank you! ...

jqueryhtmlfilefile-uploaddata-uri

Storing a webpage in HTML with the use of @import function in CSS

I'm looking to save an entire HTML page, but I'm running into an issue with the CSS file that includes the line: import url('someOtherCss.css'); When attempting to save the page using Firefox or Chrome with 'File->Save Page a ...

htmlcss

Is it possible to have the ShowHide plugin fade in instead of toggling?

I'm currently utilizing the ShowHide Plugin and attempting to make it fade in instead of toggle/slide into view. Here's my code snippet: showHide.js (function ($) { $.fn.showHide = function (options) { //default variables for the p ...

javascriptjqueryshow-hide

Continuous animation for a sequence of overlapping images with smooth transitions

Currently, I am in the process of developing a JavaScript script that will cycle through a series of images within the same <div>. The goal is to create a seamless animation effect with the image transitions. Although the images are cycling through, ...

javascripthtmlcssanimationcss-transitions

Using jQuery to Validate Input Text Control Depending on Radio Selection

How can I ensure that the input text linked to the selected radio option is filled in? For instance, in the example above: If Contact 1's Email radio option is chosen, the Email text field for Contact 1 must not be empty, while the Phone and US Mai ...

javascriptjqueryhtml

What could be causing issues with my DataTables setup when using ColumnDefs?

Currently, I am utilizing the DataTables Server Side feature to create a paginated table using data from my MySQL database. My aim is to transform the first column of the table into clickable hyperlinks based on the results fetched from MySQL. Here is an ...

phpjquerymysqldatatables

Bug on a Safari browser when using a dotted border on a table

Issue in Safari and Chrome browsers: CSS: TABLE { width: 100%; clear: both; border: 0px; border-collapse: collapse; } TABLE TH, TABLE TD { padding: 10px; text-align: center; border: 1px dotted #898989; } ...

htmlcsssafari

Controlling Material-UI using a custom .css stylesheet

Are there alternative methods for customizing Material-UI components using CSS stylesheets? I'm aware of the {makeStyles} method and JSS overrides, but I find it messy in the code and confusing when trying to modularize it in other files. Is there a ...

javascriptcssreactjsdesign-patternsmaterial-ui

Unexpected behavior with jQuery AJAX Callback function:

When attempting to extract data from the success part of an AJAX call, I implemented a callback function for this purpose. Here is the code snippet: var data2; $(function () { function callback(data) { console.log(data); data2 = JSON.parse(data ...

javascriptjqueryajax

Convert PHP MySQL REQUESTED DATE to XML format and display it on an HTML page

I've been browsing tutorials throughout the day, but have been unsuccessful in finding exactly what I need. My goal is to save strings in MySQL such as: - Name - Location - Type - Price What I'm looking for is a way to extract specific data and ...

phpjquerymysqlxmlajax

Verify if an item is already present in the HTML document before adding a new item to it using Ajax

I am working on a page that displays a list of new students with the option to accept or reject them. The list can be updated in two ways - by manually refreshing the page, or through an Ajax method that automatically updates the list when a new student re ...

jqueryhtmlajaxasp.net-mvc

Callbacks for AJAX responses that are asynchronous

After using AJAX in a limited and straightforward manner for some time, I find myself currently debugging a web application that heavily relies on JavaScript and JQuery for client-side coding. One issue that has caught my attention is the possibility of mu ...

javascriptajaxjqueryasynchronous