Datatables - sort duplicate icon

I am trying to set up an example for the data found here -

Everything is successful, but for some reason the sort icon is duplicated and I don't know why.

This is what he shows how -

here is the html i am 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="//">

    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="//"></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 am using django so jquery extends from base.html like this -

<!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 %} Company Dashboard{% endblock %}</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="">

    <!-- 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="" rel="stylesheet" type="text/css">

    <!-- Google Fonts -->
    <link href="" 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=""></script>
        <script src=""></script>

    <!-- jQuery -->
    <script src="//"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src=""></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 %}




source to share

2 answers

The SB Admin theme includes a Bootstrap add-on for DataTables.

However, the code you posted includes the default CSS DataTables. In this case one or the other must be included.

The solution is to replace the standard DataTables CSS ( //

) with dataTables.bootstrap.css and add dataTables.bootstrap.min.js

If you prefer using the default CSS DataTables, you need to fix sb-admin-2.css

around the lines 232

- 257

and remove the rules related to table.dataTable




This decision was decided by Elfayer.

render: {"header": "bootstrap"},



All Articles