Add Colum Control

docs/development/custom/framework/datatables.md

@@ -52,58 +52,42 @@ Given the `EveCharacter` Model as our model of choice we would define our stubs
                 <th>{% translate "Alliance" %}</th>
             </tr>
         </thead>
-        <!-- Put the footer in the header so it doesn't trigger the sorting on searching -->
-        <!-- only footers with text will get given an input -->
-        <!-- This is just an option, you do it however you like -->
-        <tfoot style="display: table-header-group;">
-            <tr>
-                <th></th>
-                <th>{% translate "Name" %}</th>
-                <th>{% translate "Corporation" %}</th>
-                <th>{% translate "Alliance" %}</th>
-            </tr>
-        </tfoot>
-        <!-- Empty tbody -->
-        <tbody>
-        </tbody>
     </table>
 {% endblock content %}
 {% block extra_css %}
-    {% include 'bundles/datatables-css-bs5.html' %}
+    <link rel="stylesheet" href="https://cdn.datatables.net/2.3.6/css/dataTables.bootstrap5.css" />
+    <link href="https://cdn.datatables.net/columncontrol/1.2.0/css/columnControl.bootstrap5.min.css" rel="stylesheet">
 {% endblock %}
 {% block extra_javascript %}
-    {% include 'bundles/datatables-js-bs5.html' %}
+    <script src="https://cdn.datatables.net/2.3.6/js/dataTables.js"></script>
+    <script src="https://cdn.datatables.net/2.3.6/js/dataTables.bootstrap5.js"></script>
+    <script src="https://cdn.datatables.net/columncontrol/1.2.0/js/dataTables.columnControl.min.js"></script>
     <script>
         $(document).ready(function() {
             $('#table').DataTable({
                 serverSide: true,
                 ajax: '{% url "appname:table" %}',
-                // This is for the column searching
-                initComplete: function () {
-                    this.api()
-                    .columns()
-                    .every(function () {
-                        let column = this;
-                        let title = column.footer().textContent;
-                        if (title != ""){
-                            // Create input element
-                            let input = document.createElement('input');
-                            input.classList.add("w-100")
-                            input.placeholder = title;
-                            column.footer().replaceChildren(input);
-
-                            // Event listener for user input
-                            input.addEventListener('keyup', () => {
-                                if (column.search() !== this.value) {
-                                    column.search(input.value).draw();
-                                }
-                            });
-                        }
-                    });
-                },
                 columnDefs: [
-                    { "searchable": false, "targets": [0] },
+                    {
-                    { "sortable": false, "targets": [0] },
+                        targets: [0],
+                        columnControl: [],
+                        sortable: false,
+                        searchable: false
+
+                    },
+                    {
+                        targets: [1,2,3],
+                        columnControl: [
+                            {
+                                target: 0,
+                                content: []
+                            },
+                            {
+                                target: 1,
+                                content: ['search']
+                            }
+                        ],
+                    }
                 ],
                 order: [
                     [1, "asc"]