Styling pagination for jquery dataTable

I've been looking into how to modify the pagination design, but haven't had much luck finding information on it.

Currently, the table displays the standard default pagination style with the following jquery code.

$('#id_view_student_table').DataTable({
    "pagingType": "simple_numbers",
    "language": {"paginate": {
             "previous": '<i class="fa fa-angle-left" style="color: #27c2a5"></i>',
             "next": '<i class="fa fa-angle-right" style="color: #27c2a5"></i>'
             }
     }
};

How can I manipulate the pagination elements to change the appearance using css or jquery?

Update

I've included a screenshot to showcase the dataTables_paginate elements.

Many thanks to @Birdie Golden for the initial guidance on interacting with the paginate elements. Still working on understanding how to customize the hover and current elements though. https://i.sstatic.net/alz34.png

jquerycss

Answer №1

When it comes to generating pagination, you can target dynamically generated styles by inspecting the element within the browser window.

For instance, DataTables produces the classes .dataTables_wrapper (the container) and .paginate_button (the pagination element). To customize the color and shape of the pagination button, you can modify the styles in your stylesheet like so:

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 0;
    background: #ff1493;
}

https://i.sstatic.net/rA2z2.png

I trust this information proves helpful! Best of luck :D

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

What is the method for modifying the appearance of the background property on an input element?

I am currently working on customizing an HTML5 video player's track bar using CSS. My goal is to utilize jQuery to modify the style of the track bar. One way I have attempted to change the background of the track bar with jQuery is by employing the f ...

jquerycsshtml

The response from the Ajax call to the WCF is coming back as null

I am currently facing an issue where my ajax call to a function exposed by a WCF service is always returning 'undefined' in the success method, despite the fact that the function on the WCF side is returning the correct answer. I have debugged an ...

javascriptjqueryjsonajaxwcf

Having trouble displaying a dynamically created table using jQuery

I'm a newcomer to jQuery and I need help with querying 2 web services. The goal is to query the first service, use an attribute value to query the second one, and then populate a table with data from both services. Please take a look at my code on th ...

htmljquerydatatables

Using the -webkit-box-reflect property along with the CSS position:absolute styling

Running on the Chrome Canary build, I have come across this HTML code snippet: <div id="debug" class="debug" >TEST</div> Additionally, here is the CSS code snippet: -webkit-box-reflect: below 0px -webkit-gradient(linear, ...

webkitcss

Issue with Wordpress AJAX failing to initiate PHP function

I've been troubleshooting AJAX functionality in Wordpress with no success. It seems that the communication between PHP and JS is not happening properly. The goal is to update user meta when a specific div is clicked, but it's proving to be more c ...

phpjqueryajaxwordpress

Unexpected output from nested loop implementation

Having some arrays, I am now trying to iterate through all tab names and exclude the values present in the exclusion list. json1 ={ "sku Brand": "abc", "strngth": "ALL", "area ...

javascripthtmljquerytypescript

When using jquery, the .css("border-color") method fails to provide a return value

I came up with the jquery javascript below $(document).mousemove(function(event) { var element = event.target; $(element).css("border","black solid 1px"); }); $(document).mouseout(function(event) { var element = event.target; console.log ...

jquerycssborder

If you need to take action when the position is below X in JQuery, make sure to

$("#rightControl").click(function(){ $("#thumb_menu").animate({"left": "-=520px"}, "slow"); var pos = $('#thumb_menu').position(); if(pos.left < 0) { $('#header') .prepend('<span class="contro ...

jqueryif-statementprepend

Display information in a table format by utilizing local storage with jQuery

I have encountered two issues while printing data in my table. When pulling data from localStorage to display in the table, I am facing some challenges. The data is saved correctly in localStorage as per requirements. However, the problems arise during th ...

jqueryloopslocal-storage

Tips for adjusting the placement of an object within a table

Below is an example of a basic table: table, th, td { border: 1px black solid; border-collapse: collapse; } <table> <tr> <th>number</th> <th>name</th> <th>id</th> </tr> <tr&g ...

javascripthtmlcsshtml-table

Difficulty encountering issues with JQuery's ajax function

I've encountered different errors in FF, Chrome, and IE, but it seems like there's an issue with the data in $.ajax. Below is the code snippet. Please be gentle with feedback if I have overlooked something obvious. I've spent countless hours ...

javascriptajaxjquery

Is there a way to determine the exact number of pixels being utilized by the body tag when it is set to 100% width?

Currently working on designing a website with a fluid layout. Trying to utilize percentages as measurements in order to achieve this. From my understanding, percentages are calculated based on the parent element. Given that HTML tags do not have a set widt ...

htmlcssfluid-layout

Creating a script to open multiple URLs in HTML and JavaScript

Currently, I am working on creating a multiple URL opener using HTML and JavaScript. However, I have encountered an issue where HTTP links are opening fine but HTTPS links are not. Can someone provide assistance with this problem? Below is the code snippet ...

javascriptjqueryhtmlcss

only a single backdrop filter can be in use at any given moment

Experimenting with backdrop-filter in Chrome 76. I'm working on a menu with 2 divs, each with a backdrop-filter applied. The first div is displaying the filter effect perfectly, but the second one isn't. Interestingly, when I remove the filter fr ...

htmlcss

Invert the motion within a photo carousel

Is there anyone who can assist me with creating a unique photo slider using HTML, CSS, and JS? Currently, it includes various elements such as navigation arrows, dots, and an autoplay function. The timer is reset whenever the arrows or dots are clicked. Ev ...

javascripthtmlcss

Merge ReactCssTransitionGroup with React-route's Link to create smooth page transitions

React.js I'm facing an issue with the React.js code provided below. My goal is to set up the animation before transitioning to a new page using "React-router.Link" and ReactCSSTransitionGroup. Version: react: '15.2.1' react-addons-css-trans ...

javascriptcssreactjsreact-routerreactcsstransitiongroup

The Troubles of Top Margins in CSS

Hey there, I'm a bit stumped on this issue. I've been trying to apply a 10px top margin to a paragraph inside a div, but instead of creating the space I want between elements, it just seems to push the whole containing div down by 10px. Here are ...

phphtmlcss

Clicking the Less/More button using jQuery

In my current setup, I have a code snippet that loads and displays two comments initially. There is also a button labeled More comments which, when clicked, fetches and shows the remaining comments using AJAX. Upon clicking the More comments button, it tr ...

jqueryhtmlajax

Laravel's blade allows you to easily convert an HTML element to an array using the same name

I have two separate divs with similar content but different values <div id="tracks-1"> <div> <label>Song Title</label> <input type="text" name="tracks[song_title]" value=""> <input type="text ...

javascriptphphtmljquerylaravel

How can a node be added between two nodes based on an attribute condition?

Is there a jQuery function, or perhaps another library function, that allows for the insertion of a node (div) between two other nodes (divs) based on its attribute? For instance: Assume I have the following HTML code: <div value=111/> <div val ...

javascriptjqueryhtml