Implemented bootstrap-table for parts list

InvenTree/part/templates/part/category_detail.html

@@ -17,8 +17,8 @@
 {% endif %}
 
 {% if category.has_parts %}
-<h4>Parts</h4>
+<table class='table table-striped table-condensed' id='part-table'>
-{% include "part/category_parts.html" with parts=category.parts.all %}
+</table>
 {% endif %}
 
 <div class='container-fluid'>
@@ -29,6 +29,7 @@
     <button class="btn btn-success" id='create-part'>New Part</button>
     <button class="btn btn-danger" id='delete-category'>Delete Category</button>
 
+    <button class='btn btn-primary' id='get-rows'>Do thing</button>
 </div>
 
 {% include 'modals.html' %}
@@ -40,7 +41,6 @@
 <script type='text/javascript' src="{% static 'script/modal_form.js' %}"></script>
 {% endblock %}
 {% block js_ready %}
-    $('#part-list').footable();
 
     $("#edit-category").click(function () {
         launchModalForm("#modal-form",
@@ -84,4 +84,11 @@
                             follow: true
                         });
     });
+
+    {% include "part/category_parts.html" with category=category %}
+
+    $("#get-rows").click( function() {
+        alert($("#part-table").bootstrapTable('getSelections'));
+    });
+
 {% endblock %}

InvenTree/part/templates/part/category_parts.html

@@ -1,24 +1,58 @@
-<table class="table table-striped" data-sorting='true' data-filtering='true' id="part-list">
+    $("#part-table").bootstrapTable({
-<thead>
+        sortable: true,
-    <tr>
+        search: true,
-        <th>Part</th>
+        sortName: 'description',
-        <th>Description</th>
+        idField: 'pk',
-        <th>Category</th>
+        method: 'get',
-        <th data-type='number'>Stock</th>
+        pagination: true,
-    </tr>
+        rememberOrder: true,
-</thead>
+        {% if category %}
-<tbody>
+        queryParams: function(p) {
-{% for part in parts %}
+            return {
-<tr>
+                category: {{ category.id }},
-    <td><a href="{% url 'part-detail' part.id %}">{{ part.name }}</a></td>
+            }
-    <td>{{ part.description }}</td>
+        },
-    <td>
-        {% if part.category %}
-        <a href="{% url 'category-detail' part.category.id %}">{{ part.category_path }}</a>
         {% endif %}
-    </td>
+        columns: [
-    <td><a href="{% url 'part-stock' part.id %}">{{ part.total_stock }}</a></td>
+            {
-</tr>
+                checkbox: true,
-{% endfor %}
+                title: 'Select',
-</tbody>
+                searchable: false,
-</table>
+            },
+            {
+                field: 'pk',
+                title: 'ID',
+                visible: false,
+            },
+            {
+                field: 'name',
+                title: 'Part',
+                sortable: true,
+                formatter: function(value, row, index, field) {
+                    return renderLink(value, row.url);
+                }
+            },
+            {
+                sortable: true,
+                field: 'description',
+                title: 'Description',
+            },
+            {% if category == None %}
+            {
+                sortable: true,
+                field: 'category_name',
+                title: 'Category',
+                formatter: function(value, row, index, field) {
+                    return renderLink(value, row.category_url)
+                }
+            },
+            {% endif %}
+            {
+                field: 'total_stock',
+                title: 'Stock',
+                searchable: false,
+                sortable: true,
+            }
+        ],
+        url: 'http://127.0.0.1:8000/api/part/',
+    });

InvenTree/part/templates/part/index.html

@@ -16,8 +16,7 @@
 {% include "part/category_subcategories.html" with children=children %}
 {% endif %}
 
-<h4>Parts</h4>
+<table class='table table-striped table-condensed' id='part-table'>
-{% include "part/category_parts.html" with parts=parts %}
 
 <div class='container-fluid'>
 <button type='button' class='btn btn-primary' id='create-cat'>
@@ -73,6 +72,8 @@
         launchModalForm("#modal-form", "{% url 'part-create' %}");
     });
 
+    {% include "part/category_parts.html" %}
+
     loadTree();
 
 {% endblock %}

InvenTree/static/script/tables.js

@@ -0,0 +1,14 @@
+function renderLink(text, url) {
+    if (text && url) {
+        return '<a href="' + url + '">' + text + '</a>';
+    }
+    else if (text) {
+        return text;
+    }
+    else {
+        return '';
+    }
+}
+
+
+

InvenTree/templates/base.html

@@ -49,9 +49,11 @@ InvenTree
 <script type="text/javascript" src="{% static 'script/select2/select2.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/bootstrap-treeview.js' %}"></script>
 
+
 <script type='text/javascript' src="{% static 'script/bootstrap-table.min.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/bootstrap-table-en-US.min.js' %}"></script>
 
+<script type='text/javascript' src="{% static 'script/tables.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/trees.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/sidenav.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/notification.js' %}"></script>