datatables - sort icon duplicating
SB Admin theme includes Bootstrap add-on for DataTables.
However the code you've posted, includes default DataTables CSS. In this case, one or the other should be included.
The solution is to replace default DataTables CSS (//cdn.datatables.net/1.10.7/css/jquery.dataTables.css
) with dataTables.bootstrap.css and add dataTables.bootstrap.min.js
If you prefer to use default DataTables CSS, then you need to fix sb-admin-2.css
around lines 232
-257
and remove rules related to table.dataTable
.
Related videos on Youtube
whoisearth
Didn't start developing/coding until my mid-30's after a late entry into an IT field. At the end of the day I love computers and I love tinkering. As such I've strove to learn more and more as I've dug deeper and deeper down the rabbit hole. Although I do a lot of coding "for fun" there's a definite purpose behind it be it to get ahead at work, better understand something, or fill a gap where I might see one. I suppose I like cider now too... and I'm learning to like PowerShell but FML Microsoft you annoy me.
Updated on October 03, 2022Comments
-
whoisearth over 1 year
I'm trying to setup the example for datatables found here -
http://www.datatables.net/examples/basic_init/zero_configuration.html
Everything is successful but for some reason the sort icon is duplicating and I don't know why.
This is what It's displaying like -
here is the html I'm using -
{% extends "dashboard/base.html" %} {% load static %} {% block extra_head %} <!-- Tribal CSS --> <link href="{% static "css/plugins/tribal/tribal-bootstrap.css" %}" rel="stylesheet" /> <link href="{% static "css/plugins/tribal/tribal-form.css" %}" rel="stylesheet" /> <!-- Tribal JS --> <script src="{% static "js/plugins/tribal/tribal-form.js" %}"></script> <script src="{% static "js/plugins/tribal/tribal-shared.js" %}"></script> <!-- DataTables CSS --> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css"> <!-- DataTables --> <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $('#files').DataTable(); } ); </script> {% endblock %} {% block title %}{{ user }} Dashboard{% endblock %} {% block content %} <div class="row"> <div class="col-lg-12"> <h1 class="page-header">Profile</h1> </div> <!-- /.col-lg-12 --> </div> <div class="container"> <div class="well"> <dl class="dl-horizontal dl-multicolumn" data-colcount="3"> <dt>Name</dt> <dd>{{ user }}</dd> <dt>Gender</dt> <dd>Male</dd> <dt>School</dt> <dd>Sheffield School</dd> <dt>DOB</dt> <dd>01/01/1986</dd> <dt>Email</dt> <dd>{{ user }}</dd> <dt>Address</dt> <dd> 26 Main Road<br /> Sheffield<br /> S1 1AA</dd> </dl> </div> </div> <!-- /.row --> <div class="row"> <div class="col-lg-12"> <h1 class="page-header">File Access</h1> </div> <!-- /.col-lg-12 --> </div> <div class="panel panel-default"> <div class="panel-heading"> File & Vendor Listings </div> <!-- /.panel-heading --> <div class="panel-body"> <div class="table-responsive"> <table class="table table-striped table-bordered table-hover" id="files"> <thead> <tr> <th>Vendor</th> <th>Filename</th> <th>Invoke Date</th> <th>Revoke Date</th> <th>CSS grade</th> </tr> </thead> <tbody> <tr> <td>Trident</td> <td>Internet Explorer 4.0</td> <td>Win 95+</td> <td class="center">4</td> <td class="center">X</td> </tr>
I'm using django so the jquery is being extended from base.html like so -
<!DOCTYPE html> <html lang="en"> {% load static %} {% if user.is_authenticated %} <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>{% block title %}datapi.io Company Dashboard{% endblock %}</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- MetisMenu CSS --> <link href="{% static "css/plugins/metisMenu/metisMenu.min.css" %}" rel="stylesheet"> <!-- Custom CSS --> <link href="{% static "css/sb-admin-2.css" %}" rel="stylesheet"> <!-- Custom Fonts --> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <!-- jQuery --> <script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <!-- Metis Menu Plugin JavaScript --> <script src="{% static "js/plugins/metisMenu/metisMenu.min.js" %}"></script> <!-- Custom Theme JavaScript --> <script src="{% static "js/sb-admin-2.js" %}"></script> {% block extra_head %}{% endblock %} </head>
-
Gyrocode.com over 8 yearsLooks like a conflict between DataTables CSS and some other CSS file possibly using
sorting_desc
and/orsorting_asc
classes. Inspect the CSS rules using your browser's developer tools and find the offending CSS file.
-
-
Waleed Abdalmajeed over 6 yearsThe links are broken (404) :\
-
Shahriar Rahman Zahin about 4 yearsWhat am I supposed to do with this line? please explain what you have provided
-
Pappas about 4 yearsIf table is displaying duplicate icon in the header, as shown at the top of the page. Edit js to remove duplicate icon. datatables.net/reference/option/renderer $('#example').dataTable( { renderer: { "header": "bootstrap" } } );