Answers

• colin Posts: 15,240Questions: 1Answers: 2,599

  January 2020

  This thread might be useful - it's going in the opposite direct, replacing default with the Bootstrap icons - but it might give you a starting point.

  Colin
• TimothyV Posts: 34Questions: 7Answers: 0

  January 2020

  Thanks, Colin. I actually came across this post before writing my question yet cannot figure out why it will not work so I hosted the base demo at https://jsfiddle.net/TimothyV/c62kL7oj/.
• TimothyV Posts: 34Questions: 7Answers: 0

  January 2020

  Do you know if the only change I need to make is in dataTables.bootstrap.min.css?
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  January 2020 Answer ✓

  Yes, the only change would be in dataTables.bootstrap.min.css (or some other file that overrides it).

  The easiest change will probably be to update the icon that our stylesheet is using with an icon you prefer. glyphicon-menu-up for example?

  Allan
• TimothyV Posts: 34Questions: 7Answers: 0

  January 2020

  Allan, once again thank you for your answer. Now I am just trying to figure out to make the sort images using https://datatables.net/examples/styling/bootstrap.html to look like the ones (black arrows) at https://datatables.net/examples/basic_init/zero_configuration.html but whatever I try does not work. The look of https://datatables.net/examples/styling/bootstrap.html is perfect and I only want to change the three sort icons.

  https://datatables.net/examples/styling/bootstrap.html
  table.dataTable thead .sorting:after{
  opacity:0.2;
  content:"\e150"
  }
  table.dataTable thead .sorting_asc:after{
  content:"\e155"
  }
  table.dataTable thead .sorting_desc:after{
  content:"\e156"
  }

  https://datatables.net/examples/basic_init/zero_configuration.html
  table.dataTable.table thead th.sorting:after,table.dataTable.table thead td.sorting:after{
  content:"\f0dc";
  color:#ddd;
  font-size:0.8em
  }
  table.dataTable.table thead th.sorting_asc:after,table.dataTable.table thead td.sorting_asc:after{
  content:"\f0de"
  }
  table.dataTable.table thead th.sorting_desc:after,table.dataTable.table thead td.sorting_desc:after{
  content:"\f0dd"
  }

  So now I am thinking perhaps I should use a relative url path to the images I downloaded. I searched the forum yet could not find anything on this. Is there perhaps an example to override sort_asc.png, sort_both.png and sort_desc.png using url('../../images/...') in the CSS? I value your time and certainly appreciate how helpful you have been.
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  January 2020

  Yes, if you'd rather use png images rather than the icons built into Bootstrap 3, then the way to do it would be to completely override those styles.

  This is the core CSS for DataTables styling sorting which you might be able to use as the basis for it - note that its SCSS there - it gets compiled down to CSS.

  Allan
• TimothyV Posts: 34Questions: 7Answers: 0

  January 2020

  Allan, thank you. I will look into this further although I discovered that I loose the sort column images if I use the original downloaded files with no alterations yet host one of them (bootstrap.min.css) locally. Is this a known issue?

  @*<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />*@
  <link rel="stylesheet" type="text/css" href="../../bootstrap.min.css" />
  
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css" />
  
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>
  
  <script type="text/javascript">
      $(document).ready(function () {
          $('#example').DataTable();
      });
  </script>
  
  <table id="example" class="table table-striped table-bordered" style="width:100%">
      <thead>
          <tr>
              <th>Name</th>
              <th>Position</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>Tiger Nixon</td>
              <td>System Architect</td>
          </tr>
          <tr>
              <td>Garrett Winters</td>
              <td>Accountant</td>
          </tr>
      </tbody>
  </table>
  

  https://jsfiddle.net/TimothyV/c62kL7oj/5/

  There is no issue if I reference

  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  

  in place of

  <link rel="stylesheet" type="text/css" href="../../bootstrap.min.css" />
  

  Can someone please help with this?
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  January 2020

  although I discovered that I loose the sort column images if I use the original downloaded files with no alterations yet host one of them (bootstrap.min.css) locally. Is this a known issue?

  Not so much an issue / bug as not expected to be used that way. They would need to be modified (and if you are using the SCSS also be compiled).

  You'd need to take the bootstrap.css file (not the .min.css one, unless you want a real challenge!) and modify it to use the original icons.

  The easier solution, if you aren't comfortable doing that, is to modify the bootstrap.css file to change which of the Bootstrap icons it refers to, to those which match your requirements a bit better as I suggested above.

  Allan
• TimothyV Posts: 34Questions: 7Answers: 0

  January 2020 edited January 2020

  Thanks Allan, perhaps I am missing something foundational but when I do not modify any files but simply reference the one (https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css) locally, the column sort icons change to an unrecognizable image.

  @*<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />*@
  <link rel="stylesheet" type="text/css" href="../../bootstrap.css" />
  
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css" />
  
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>
  

  The sorting does continue to work, it's just that the sort image changes. Should I not be able to reference the https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css file locally with the prescribed column sort images showing?
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  January 2020 Answer ✓

  You can reference the CDN files (which are not local, unless you download them) and then override the CSS inside them using local CSS.

  https://jsfiddle.net/p2rwy36k/

  Allan
• TimothyV Posts: 34Questions: 7Answers: 0

  January 2020

  Allan,

  Thank you so much for solving this issue for me. Also, I appreciate you sticking with me until it was complete. The CSS you provided at https://jsfiddle.net/p2rwy36k/ is the solution I needed.

  Keep up the great work and have a great day!