Align the reposition button with the pagination in the datatables

I am looking to adjust the placement of my buttons.

The buttons in question are for comparison, saving layout, and printing. I would like them to be inline with the pagination, as I am using datatables here.

<table id="sparepart_id" cellspacing="0" border="0" class="table table-striped nowrap dataTable" style="border-collapse: collapse;">
  <colgroup span="7" width="85"></colgroup>
  <tbody id="sparepart_data">
  </tbody>
</table>
<div style="position: relative;">
  <div class="col-md-8">
    <a href="#"><button type="button" class="btn btn-primary form-input" style="border-radius: 10px;font-size:13px;">COMPARE</button></a>
    <input type="hidden" name="btn_user_filter" id="btn_user_filter">
    <button type="button" class="btn btn-default form-input" data-filterType="user" style="border-radius: 10px;font-size:13px;">Save Layout</button>
  </div>
  <div class="col-md-4"><button type="button" class="btn btn-default" data-filterType="user" style="border-radius: 10px;"><i class="fa fa-print"></i>Print</button></div>
</div>

Check out a screenshot of the current layout here

javascriptjqueryhtmlcssdatatable

Answer №1

It appears that you are utilizing the bootstrap layout

<table id="sparepart_id" cellspacing="0" border="0" class="table table-striped nowrap dataTable" style="border-collapse: collapse;">
  <colgroup span="7" width="85"></colgroup>
  <tbody id="sparepart_data">
  </tbody>
</table>
<div class="container-fluid">
<div class="row">
  <div class="col-md-8 col-sm-8 col-8">
    <a href="#"><button type="button" class="btn btn-primary form-input" style="border-radius: 10px;font-size:13px;">COMPARE</button></a>
    <input type="hidden" name="btn_user_filter" id="btn_user_filter">
    <button type="button" class="btn btn-default form-input" data-filterType="user" style="border-radius: 10px;font-size:13px;">Save Layout</button>
  </div> 
  <div class="col-md-4 col-sm-4 col-4"><button type="button" class="btn btn-default" data-filterType="user" style="border-radius: 10px;"><i class="fa fa-print"></i>Print</button></div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

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

I am having trouble setting breakpoints in Google Chrome

For a while, I've been using Google Chrome to debug my JavaScript code without any issues. However, out of nowhere, I am no longer able to place breakpoints. When I click on the line number where I used to add breakpoints, nothing happens. Sometimes, ...

javascriptdebuggingjsongoogle-chrome

The sidebar is not correctly displaying at full height

Having trouble getting the sidebar to fit perfectly between the header/nav and footer in full height. <html> <head> <meta charset="utf-8"> </head> <body> <header> <div class="header"> & ...

javascripthtmlcss

Tallying discarded objects post removal from drop zone

Is there a way to accurately count dropped items within a dropped area? I have created an example that seems to be working fine but with one minor issue. When I begin removing items, the count does not include the first item and only starts decreasing afte ...

javascriptjquery

Efficient communication across angular modules on a global scale

Currently, I am working on a project that involves Angular2 with multiple modules. One of the main modules is called BaseModule, and in addition to that, there are two extra modules - FirstModule and SecondModule. Each module has its own routing mechanis ...

javascriptangular

Arranging Functions in JavaScript

I am encountering an issue regarding the execution of JavaScript functions within HTML. Specifically, I am using dimple.js to create a graph and need to select an svg element once the graph is created via JavaScript. Despite placing my jQuery selector as t ...

javascriptjqueryhtmlsvgdimple.js

I am facing an issue with body-parser not properly processing my request in express.js

Utilizing the Controller in my project. Snippet from app.js: var express = require('express'); var app = express(); const routes = require('./Routes/route'); const bodyParser = require('body-parser'); app.use('/', ...

javascriptnode.jsexpress

"Surprising outcomes when using the splice method on an array

Exploring the functionalities of Array.splice(). deleteCount: A whole number indicating the quantity of old array elements to eliminate. Understood. It seems clear. I aim to extract the final 4 items in the array. I trust that refers to elements? arr. ...

javascriptarrays

CSS code to modify background color upon mouse hover

I am currently working on creating a navigation menu. Check out the code snippet here: http://jsfiddle.net/genxcoders/ZLh3F/ /* Menu */ .menu { height: 100px; float: right; z-index: 100; } .menu ...

htmlcss

Alignment issue with ThreeJS Collada file

I'm currently diving into the world of ThreeJS and I am experimenting with loading collada files into a viewer. My journey began by replicating the code from the Elf colladaLoader demo. I successfully managed to display the model inside an 800px squa ...

javascriptthree.jscollada

What is the best term to use for the collection objects that are circulated among jQuery functions?

Is there a commonly accepted name for the objects manipulated by jQuery? jQuery primarily uses chain-able function calls that handle and return collection objects containing different HTML or DOM nodes, which may or may not be interconnected. They are o ...

objectcollectionsterminologyjquery

Creating Visuals from Text with ReactJS/NextJS

Looking to transform text into an image with a shareable link in ReactJS, similar to Spotify's lyrics sharing feature. I haven't attempted any solutions so far. I've explored various libraries without success. ...

javascripthtmlcssreactjsnext.js

What is the process for instructing React Query fetchQuery to initiate a fresh GET request instead of relying on the cached response?

Currently, I have a function in place that initiates a GET request for my user data and stores it in the cache using react query's fetchQuery. This allows subsequent calls to simply retrieve the data from the cache instead of making a new GET request. ...

javascriptreactjsreact-query

"An error occurred while trying to access the data for a new user on the snapshot object while navigating to the screen. It seems that the object is

When I navigate to the screen, I use componentDidMount to trigger fetchNewUser which is meant to detect a new user and update it if necessary. However, I encounter an issue where on initial navigation to the screen, it returns undefined is not an object ...

javascriptreactjsfirebasereact-nativeasync-await

Creating a flexible parent tag for grouping child elements using Angular 2

My Objective I am determined to develop an Angular 2 button component that can dynamically render as either an <a /> tag or an <input /> tag based on the value of a property called type. Furthermore, this button component should be able to acc ...

javascriptangular

Managing data in a database on Discord using JavaScript to automatically delete information once it has expired

Recently, I implemented a premium membership feature for my discord bot. However, I encountered an issue where the membership time starts counting down before the intended start time. To resolve this, I am looking to automatically delete the data from the ...

javascriptdiscord

Having trouble locating module '@mdx-js/mdx' in Gatsby forest

Since the most recent update today, I've been encountering this error. There is no MDX being used in my project at all.. When running npm run develop, this issue arises. Does anyone have any insights on this? internal/modules/cjs/loader.js:979 thro ...

javascriptnode.jsnpmgatsby

Using JavaScript to create a tree structure with hierarchical organization in JSON

Having some trouble converting a nested hierarchical tree from a JSON array. Looking to create a hierarchical tree structure from the provided JSON data. Below is the data: [{ "_id" : "59b65ee33af7a11a3e3486c2", "C_TITLE" : "Sweet and Snacks", ...

javascriptjson

Using Clip Path will result in the content always being hidden if it

Here is an example I created: div { -webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); background-color: red; width: 150px; height: 150px; position: relative; } ul{ position: absolute; ...

cssclip-path

Show HTML code inside a text box

I have a text box that I populate with data from a Json response like this: <div class="gadget-body" style="height:100px"> <label>{{ textData}}</label> </div> Now, the Json response contains HTML code with <p> and < ...

htmlcss

What causes the .getJSON function to return a MIME type error when trying to access the API

I've been attempting to make a call to the Forismatic API, but I keep encountering a MIME type error when sending it. JQuery Request: $(document).ready(function() { $("#quote-button").on("click", function(){ $.getJSON("https://api.forism ...

javascriptjqueryjson