whoisearth whoisearth - 1 year ago 85
Javascript Question

datatables - sort icon duplicating

I'm trying to setup the example for datatables found here -


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() {
} );

{% endblock %}

{% block title %}{{ user }} Dashboard{% endblock %}

{% block content %}

<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Profile</h1>
<!-- /.col-lg-12 -->
<div class="container">
<div class="well">
<dl class="dl-horizontal dl-multicolumn" data-colcount="3">
<dd>{{ user }}</dd>
<dd>Sheffield School</dd>
<dd>{{ user }}</dd>
26 Main Road<br />
Sheffield<br />
S1 1AA</dd>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">File Access</h1>
<!-- /.col-lg-12 -->

<div class="panel panel-default">
<div class="panel-heading">
File & Vendor Listings
<!-- /.panel-heading -->
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="files">
<th>Invoke Date</th>
<th>Revoke Date</th>
<th>CSS grade</th>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>

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 %}


<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>

<!-- 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 %}


Answer Source

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.