Part #03 | Column Filtering (individual live search) | Django 4 + Datatables + Bootstrap 5

Hello guys ! Let's create Column Filtering (individual live search) using django 4 + datatables + bootstrap 5 ? Come with me... # CATEGORY: MINI APPs ========================= | {% block code %} === Source code: https://www.patreon.com/DjangoMastery/membership Get all Mini Apps from my channel by choosing: All Mini Apps (category) === {% endblock %} ---------------------------------------------------- {% block content %} === Part 3: Column Filtering (individual live search) Completely updated 2022 where I will be using django 4 and bootstrap 5. It's an intermediate-advanced series. In this class I will teach you how to create a search field for each column of the table. Now you can search for the data individually in each column. All the input search are global live search. === OTHER PARTS: Part 1: Outside configurations: https://youtu.be/gGXS513Vj60 Part 2: Buttons (PDF - Excel - Print - Copy): https://youtu.be/3GEdd5onOos {{ You are here }} Part 4: Ajax and Json response: https://youtu.be/ntH6Fb9Rdkw Part 5 (Bonus #1): CRUD: https://youtu.be/ZkHP9ruW5u4 Part 6 (Bonus #2): Login as Root: https://youtu.be/T4O4t9IagAk Part 7 (Bonus #3): Responsive mode: https://youtu.be/b8u1hplxz8Q Playlist: https://youtube.com/playlist?list=PLEoCKCuqTqMjfPjvmfAIfYxg-37Hhljl_&si=DaxbxWW4ySPdKlJP Note: Documentation for this class you can find here: https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html Hope you like it ! Let's code !!! === {% endblock %} ---------------------------------------------------- {% block i-forgot %} === Guys i forgot to enable the header on PRINT MODE. To fix this, just include the code below inside the // Datatables configurations: orderCellsTop: true, Full settings below: // Datatables configurations paging: true, // Pagination pageLength: 10, // Data per page lengthChange: true, // Show entries per page autoWidth: true, // Control the auto width on columns searching: true, // Input search bInfo: true, // Info on footer bSort: true, // Filter A to Z and Z to A (and nunbers) orderCellsTop: true, === {% endblock %} ---------------------------------------------------- {% block Fix-this %} === At 12:40 I put KEYIP, but the correct one is KEYUP. Fix this in your code. Thanks ! === {% endblock %} ---------------------------------------------------- {% block speech %} === I recommend you to watch the video at 1.5x or 1.75x speed because my speech is very slow. === {% endblock %} ---------------------------------------------------- {% block correction %} === At the beginning of the video I said INDIVIDUAL GLOBAL LIVE SEARCH, but the correct one is INDIVIDUAL LIVE SEARCH because it doesn't do a global search, but by columns. The global live search input is located in the upper right corner (in the navbar). Because this input is who will search for all columns. === {% endblock %} ---------------------------------------------------- {% block thanks %} === Thank you so much guys for watching this video, like the video, subscribe to my channel, leave a comment in the description, share this video and subscribe to help in the growth of this channel. === {% endblock %} ---------------------------------------------------- {% block contact %} === # Email: djangomastery@yahoo.com Note: This email is also available for professional hires. === {% endblock %} ---------------------------------------------------- {% block credits %} === # Datatables: https://datatables.net # Jquery: https://jquery.com/ # Bootstrap: https://getbootstrap.com/ # Favicon generator: https://www.favicon.cc/ # Free icon: https://icon-icons.com/ === {% endblock %}