javascript - Changing sorting icons in jQuery DataTables header

I am using DataTables plugin with bootstrap 4 styling to draw my table. Below is the code:

$(document).ready(function () {
		$('#my-table').DataTable({
			scrollY: '20vh',
			paging: false,
			dom: '<f>t',
      searching: false
		});
});

body {
  padding: 3%;
}

<!DOCTYPE html>

<html lang="en">

  <head>
    <!-- bootstrap -->
    <link rel="stylesheet" href=".1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <!-- dataTable -->
    <link rel="stylesheet" type="text/css" href=".10.20/css/dataTables.bootstrap4.min.css">

    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>

  <body>

    <table class="table table-striped  table-hover table-fit" id="my-table">
      <thead class='thead-dark'>
        <tr>
          <th>Header</th>
        </tr>
      </thead>
      <tbody>
         <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
      </tbody>

    </table>


    <!-- jQuery -->
    <script src=".5.0.min.js"></script>
    <!-- Popper.js -->
    <script src="/[email protected]/dist/umd/popper.min.js"></script>
    <!-- dataTable -->
    <script src=".10.20/js/jquery.dataTables.min.js"></script>
    <script src=".10.20/js/dataTables.bootstrap4.min.js"></script>
  </body>

I am using DataTables plugin with bootstrap 4 styling to draw my table. Below is the code:

$(document).ready(function () {
		$('#my-table').DataTable({
			scrollY: '20vh',
			paging: false,
			dom: '<f>t',
      searching: false
		});
});

body {
  padding: 3%;
}

<!DOCTYPE html>

<html lang="en">

  <head>
    <!-- bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <!-- dataTable -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables/1.10.20/css/dataTables.bootstrap4.min.css">

    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>

  <body>

    <table class="table table-striped  table-hover table-fit" id="my-table">
      <thead class='thead-dark'>
        <tr>
          <th>Header</th>
        </tr>
      </thead>
      <tbody>
         <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
      </tbody>

    </table>


    <!-- jQuery -->
    <script src="https://code.jquery./jquery-3.5.0.min.js"></script>
    <!-- Popper.js -->
    <script src="https://cdn.jsdelivr/npm/[email protected]/dist/umd/popper.min.js"></script>
    <!-- dataTable -->
    <script src="https://cdn.datatables/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables/1.10.20/js/dataTables.bootstrap4.min.js"></script>
  </body>

I want to change the sorting arrows in the header to some other icons that look bigger. Something like this:

I have followed many answers: How to change Jquery datatable sort icon color

How to change the color of the sorting arrows in DataTables

https://datatables/forums/discussion/40100/replacing-original-sorting-icons-with-bootstrap-4

I have tried this in my css file:

table.dataTable thead .sorting:before, 
table.dataTable thead .sorting_asc:before, 
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before, 
table.dataTable thead .sorting_desc_disabled:before {
  content: "\E253" !important;
}

But they don't change or the icons bee distorted:

How do I do this? Or How can I make the original icons thicker?

Share edited Jun 12, 2020 at 16:57 asked Jun 12, 2020 at 16:44 hydradon 1,4542 gold badges24 silver badges57 bronze badges

Using a similar approach to yours, here is an example where the default icons are replaced by arrows. Instead of those arrows, maybe you can use your triangles (e.g. this or similar). – andrewJames Commented Jun 12, 2020 at 17:29
added solution @hydradon. – Avinash Dalvi Commented Jun 12, 2020 at 18:05

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

Use this :

$(document).ready(function () {
		$('#my-table').DataTable({
			scrollY: '20vh',
			paging: false,
			dom: '<f>t',
      searching: false
		});
});

body {
  padding: 3%;
}

table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {
    right: 1em;
    content: "\02C6" !important;
}

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
    right: 0.5em;
    content: "\02C7" !important;
}

<!DOCTYPE html>

<html lang="en">

  <head>
    <!-- bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <!-- dataTable -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables/1.10.20/css/dataTables.bootstrap4.min.css">
    <link href="//maxcdn.bootstrapcdn./font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
  </head>

  <body>

    <table class="table table-striped  table-hover table-fit" id="my-table">
      <thead class='thead-dark'>
        <tr>
          <th>Header
            
          </th>
        </tr>
      </thead>
      <tbody>
         <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
      </tbody>

    </table>


    <!-- jQuery -->
    <script src="https://code.jquery./jquery-3.5.0.min.js"></script>
    <!-- Popper.js -->
    <script src="https://cdn.jsdelivr/npm/[email protected]/dist/umd/popper.min.js"></script>
    <!-- dataTable -->
    <script src="https://cdn.datatables/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables/1.10.20/js/dataTables.bootstrap4.min.js"></script>
  </body>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Changing sorting icons in jQuery DataTables header - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)