Implement DataTables in CorpStats

Site header is broken on pages with DataTables.

corputils/templates/corputils/base.html

@@ -10,8 +10,8 @@
                 <div class="container-fluid">
                     <ul class="nav navbar-nav">
                         <li class="dropdown">
-                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Corporations" %}<span class="caret"></span></a>
+                            <a href="#" id="dLabel" class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false">{% trans "Corporations" %}<span class="caret"></span></a>
-                            <ul class="dropdown-menu">
+                            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                 {% for corpstat in available %}
                                     <li>
                                         <a href="{% url 'corputils:view_corp' corpstat.corp.corporation_id %}">{{ corpstat.corp.corporation_name }}</a>
@@ -27,7 +27,7 @@
                     </ul>
                     <form class="navbar-form navbar-right" role="search" action="{% url 'corputils:search' %}" method="GET">
                         <div class="form-group">
-                            <input type="text" class="form-control" name="search_string" placeholder="{% if search_string %}{{ search_string }}{% else %}{% trans "Search characters..." %}{% endif %}">
+                            <input type="text" class="form-control" name="search_string" placeholder="{% if search_string %}{{ search_string }}{% else %}{% trans "Search all corporations..." %}{% endif %}">
                         </div>
                     </form>
                 </div>
@@ -36,4 +36,3 @@
         </div>
     </div>
 {% endblock %}
-

corputils/templates/corputils/corpstats.html

@@ -1,7 +1,6 @@
 {% extends 'corputils/base.html' %}
 {% load i18n %}
 {% load humanize %}
-{% load bootstrap_pagination %}
 {% block member_data %}
     {% if corpstats %}
         <div class="row">
@@ -58,9 +57,15 @@
                         <div class="tab-content">
                             <div class="tab-pane fade in active" id="mains">
                                 {% if mains %}
-                                    <div class="text-center">{% bootstrap_paginate mains range=10 %}</div>
                                     <div class="table-responsive">
-                                        <table class="table table-hover">
+                                        <table class="table table-hover" id="table-mains">
+                                            <thead>
+                                                <tr>
+                                                    <th></th>
+                                                    <th></th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
                                                 {% for main in mains %}
                                                     <tr>
                                                         <td class="text-center" style="vertical-align:middle">
@@ -99,15 +104,16 @@
                                                         </td>
                                                     </tr>
                                                 {% endfor %}
+                                            </tbody>
                                         </table>
                                     </div>
                                 {% endif %}
                             </div>
                             <div class="tab-pane fade" id="members">
                                 {% if members %}
-                                    <div class="text-center">{% bootstrap_paginate members range=10 %}</div>
                                     <div class="table-responsive">
-                                        <table class="table table-hover">
+                                        <table class="table table-hover" id="table-members">
+                                            <thead>
                                                 <tr>
                                                     <th></th>
                                                     <th class="text-center">{% trans "Character" %}</th>
@@ -116,6 +122,8 @@
                                                     <th class="text-center">{% trans "Main Corporation" %}</th>
                                                     <th class="text-center">{% trans "Main Alliance" %}</th>
                                                 </tr>
+                                            </thead>
+                                            <tbody>
                                                 {% for member in members %}
                                                     <tr {% if not member.registered %}class="danger"{% endif %}>
                                                         <td><img src="{{ member.portrait_url }}" class="img-circle"></td>
@@ -129,20 +137,23 @@
                                                         <td class="text-center">{{ member.main_character.alliance_name }}</td>
                                                     </tr>
                                                 {% endfor %}
+                                            </tbody>
                                         </table>
                                     </div>
                                 {% endif %}
                             </div>
                             <div class="tab-pane fade" id="unregistered">
                                 {% if unregistered %}
-                                    <div class="text-center">{% bootstrap_paginate unregistered range=10 %}</div>
                                     <div class="table-responsive">
-                                        <table class="table table-hover">
+                                        <table class="table table-hover" id="table-unregistered">
+                                            <thead>
                                                 <tr>
                                                     <th></th>
                                                     <th class="text-center">{% trans "Character" %}</th>
                                                     <th class="text-center"></th>
                                                 </tr>
+                                            </thead>
+                                            <tbody>
                                                 {% for member in unregistered %}
                                                     <tr class="danger">
                                                         <td><img src="{{ member.portrait_url }}" class="img-circle"></td>
@@ -156,6 +167,7 @@
                                                         </td>
                                                     </tr>
                                                 {% endfor %}
+                                            </tbody>
                                         </table>
                                     </div>
                                 {% endif %}
@@ -167,3 +179,17 @@
         </div>
     {% endif %}
 {% endblock %}
+{% block extra_javascript %}
+    <script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/dt-1.10.15/r-2.1.1/rg-1.0.0/datatables.min.js"></script>
+    <script type="text/javascript">
+        $(document).ready(function(){
+            $('#table-mains').DataTable();
+            $('#table-members').DataTable();
+            $('#table-unregistered').DataTable();
+            $('.dropdown-toggle').dropdown();
+        });
+    </script>
+{% endblock %}
+{% block extra_css %}
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/dt-1.10.15/r-2.1.1/rg-1.0.0/datatables.min.css"/>
+{% endblock %}

corputils/templates/corputils/search.html

@@ -1,17 +1,14 @@
 {% extends "corputils/base.html" %}
 {% load i18n %}
 {% load bootstrap_pagination %}
-{% load eveonline_extras %}
 {% block member_data %}
     <div class="panel panel-default">
         <div class="panel-heading clearfix">
             <div class="panel-title pull-left">{% trans "Search Results" %}</div>
         </div>
         <div class="panel-body">
-            <div class="text-center">
+            <table class="table table-hover" id="table-search">
-                {% bootstrap_paginate results range=10 %}
+                <thead>
-            </div>
-            <table class="table table-hover">
                     <tr>
                         <th class="text-center"></th>
                         <th class="text-center">{% trans "Character" %}</th>
@@ -21,6 +18,8 @@
                         <th class="text-center">{% trans "Main Corporation" %}</th>
                         <th class="text-center">{% trans "Main Alliance" %}</th>
                     </tr>
+                </thead>
+                <tbody>
                     {% for result in results %}
                         <tr {% if not result.1.registered %}class="danger"{% endif %}>
                             <td class="text-center"><img src="{{ result.1.portrait_url }}" class="img-circle"></td>
@@ -32,7 +31,20 @@
                             <td class="text-center">{{ result.1.main_character.alliance_name }}</td>
                         </tr>
                     {% endfor %}
+                </tbody>
             </table>
         </div>
     </div>
 {% endblock %}
+{% block extra_javascript %}
+    <script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/dt-1.10.15/r-2.1.1/rg-1.0.0/datatables.min.js"></script>
+    <script type="text/javascript">
+        $(document).ready(function(){
+            $('#table-search').DataTable();
+            $('.dropdown-toggle').dropdown();
+        });
+    </script>
+{% endblock %}
+{% block extra_css %}
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/dt-1.10.15/r-2.1.1/rg-1.0.0/datatables.min.css"/>
+{% endblock %}

corputils/views.py

@@ -4,28 +4,13 @@ from django.shortcuts import render, redirect, get_object_or_404
 from django.contrib import messages
 from django.core.exceptions import PermissionDenied
 from django.db import IntegrityError
-from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
 from django.utils.translation import ugettext_lazy as _
-from django.conf import settings
 from eveonline.models import EveCharacter, EveCorporationInfo
 from eveonline.managers import EveManager
 from corputils.models import CorpStats
 from esi.decorators import token_required
 from bravado.exception import HTTPError
 
-MEMBERS_PER_PAGE = int(getattr(settings, 'CORPSTATS_MEMBERS_PER_PAGE', 20))
-
-
-def get_page(model_list, page_num):
-    p = Paginator(model_list, MEMBERS_PER_PAGE)
-    try:
-        members = p.page(page_num)
-    except PageNotAnInteger:
-        members = p.page(1)
-    except EmptyPage:
-        members = p.page(p.num_pages)
-    return members
-
 
 def access_corpstats_test(user):
     return user.has_perm('corputils.view_corp_corpstats') or user.has_perm(
@@ -94,17 +79,10 @@ def corpstats_view(request, corp_id=None):
         'available': available,
     }
 
-    # paginate
-    members = []
-    mains = []
-    unregistered = []
-    if corpstats:
-        page = request.GET.get('page', 1)
-        members = get_page(corpstats.members.all(), page)
-        mains = get_page(corpstats.mains.all(), page)
-        unregistered = get_page(corpstats.unregistered_members.all(), page)
-
     if corpstats:
+        members = corpstats.members.all()
+        mains = corpstats.mains.all()
+        unregistered = corpstats.unregistered_members.all()
         context.update({
             'corpstats': corpstats,
             'members': members,
@@ -142,12 +120,10 @@ def corpstats_search(request):
             similar = corpstats.members.filter(character_name__icontains=search_string)
             for s in similar:
                 results.append((corpstats, s))
-        page = request.GET.get('page', 1)
         results = sorted(results, key=lambda x: x[1].character_name)
-        results_page = get_page(results, page)
         context = {
             'available': CorpStats.objects.visible_to(request.user),
-            'results': results_page,
+            'results': results,
             'search_string': search_string,
         }
         return render(request, 'corputils/search.html', context=context)