Multiple checkbox for the same column using bootstrap modals

DavidEscri · October 2022

I have this filter which is working properly for my table which has a column for events and other column for descriptions.

    $(document).ready( function () {
      var table = $('#tablaEventos').DataTable({
          "ordering": false,
          "language":{
              "url": "//cdn.datatables.net/plug-ins/1.12.1/i18n/es-ES.json"
          }
      });

      $('input:checkbox').on('change', function () {
      var events = $('input:checkbox[name="event"]:checked').map(function() {
      return '^' + this.value + '$';
      }).get().join('|');

      table.column(0).search(events, true, false, false).draw(false);

      });

    });

However, i have added bootstrap modals to the table whenever an element of the "Event" column is clicked and know when i filter the event no elements are found and honestly i don't know the reason.

These are working examples (the real application is using flask on python and the language for html is jinja2 so i had to create different modals manually but in the real one there's only one, just like with the checkboxes and the number of events):
- Checkbox filter using modals: https://plnkr.co/edit/IFR9CxyMFuHHbsfl?open=lib%2Fscript.js
- Checkbox filter without using modals: https://plnkr.co/edit/fvmedFEyPCwqgdBo?open=lib%2Fscript.js

kthorngren · October 2022

This is the content of your cells:

                  <td>
                    <a href="" data-bs-toggle="modal" data-bs-target="#modal119">
                      119
                    </a>
                  </td>

Which will no longer match your regex search term. Use orthogonal data to return the a text for the filter operation.

Kevin

DavidEscri · October 2022

Then, the content of my cells is the modal for that cell however looking for orthogonal data, it seems like it uses like messages in json format, how am i supposed to implement that on the code? I would be grateful if you could be a little more specific please.

kthorngren · October 2022

I updated your first example:
https://plnkr.co/edit/55JIlpu1P0CKlvOj?open=lib%2Fscript.js

Kevin

DavidEscri · October 2022

Thanks a lot!! But i have bad news, it works for the exemple but not in the real applicaction, i guess it's because i don't really use #modal119 or 119 for the modal ID and it's text, im using a variable depending on a loop. I mean, #modal119 is #modal{{ loop.index0 }} being that the index of the loop and 119 is {{ eventInformation.Event }} which depending the index of the loop it's the number of an event or other. I don't know if that really makes a difference...

kthorngren · October 2022

I'm not clear on what you are doing. The point is that you are using regex to search for ^119$ but your cell data apparently has more data in it so the regex search term doesn't work. The columns.render function needs to manipulate the cell data to match what you want to search for.

I'm not sure if you are populating the DOM table with the data, like your example, or if you are using ajax to fetch the data. But you can use the browser's debugger, or a console.log statement in the render function or look at the XHR response, in the case of ajax, to see what the cell data is.

My example isn't using the ID either. Its using jQuery text() to get the text from the a element in the cell data. Sounds like you need to modify this to match that actual data you have in the cell. I'm assuming the text you want to search for is embedded somewhere in the cell data.

Kevin

DavidEscri · October 2022

What I am doing is basically creating a python application with flask that from diferent files which are in json format information is extracted from different fields and that information is displayed on the web page in a more aesthetic way.

The table shows the information of the events that occur in one of those files. As I am using flask, when rendering a template I can pass variables as an argument, in this case the argument is a list with all the events that are on the file. Then, in the template I iterate between each one of these events and I put the information where I am interested.

The event ID (e.g. 119, 117, 122, etc) is the value of the first column and, by clicking on the event ID of each row, all the information of that specific event is shown. For this reason, in the previous comment when I told you that I used {{ eventInformation.Event }}, it is the way to use the variables that are passed as argument to the tempalte, in this case eventInformation is the information of an event within a list of events and I access to the value of the key "Event" of that event on which it is iterating so i get that 119, 117, 122, etc.

If there is a way in which we can talk better I would appreciate it as it is really the only feature that is missing. If not, I will try different methods until I get it. Thank you very much Kevin.

kthorngren · October 2022

Maybe you can post an example of the real data for the cells in the first column. Is one of your other examples more representative of the data in the first column?. Then we can give you a better idea of how to render the filter data. You might be able to use a jQuery method to get the data. Maybe jQuery attr() to get the id attribute. Possibly you will need to use Javascript regex search to find the string of interest.

Possibly the data in the first column can just be the raw data, ie, 119 or 117. Create a delegated click event, like this example, that opens the modal.

Kevin

DavidEscri · November 2022

Yes, if I could post the real information of each cell everything would be easier but i can't due to the company data protection. Fortunately, after hours of testing, I have managed to solve it. The problem was that in the real example I was creating the modal of each event inside the table so I guess the script bugged due to my bad design.

Anyways, I have a new problem now that I am trying to solve, this is to create a next event and previous event button that works according to what is shown in the table (for the cases where the table is filtered and maybe only 2 cells are shown). My current buttons only iterate depending on the table with no filtering.

Example:
Cells data: 119, 121, 122, 121 and if i filter for example event 121 it showns both events 121 but if i click next event button on the first 121 it goes to event 122 and not 121.

kthorngren · November 2022

Sorry I don't understand what you are trying to do. It doesn't sound like a Datatables issue, unless you are referring to the paging buttons. Pleasse provide a test case showing this issue so we can take a look.

Kevin

DavidEscri · November 2022

The table you updated with the correct answer, imagine the cells of the "Event" column being 123, 119, 117 and 119 instead of 123, 117, 119 and 119. The cell 123 has a modal which ID is 1, then the cell 119 has a modal with the ID 2 and so on. So, when the table is filtered for example for the event 119, it will show both events 119, one with the ID 2 and the other with the ID 4 but if i create a "Next Event" button how do i display the next modal ID of the event that is shown in the table and not the next ID real?

Anyways, as i was saying before, the real application is using jinja2 and variables from python like lists and dictionaries. So the ID of the real modals are like #modal{{ loop.index0 }} so every iteration has a diferent ID and i just do href="#modal{{ loop.index0 + 1 }} for the next event. I guess is just to get the right logic of the ID but i don't get it.

There is a little example, just filter by event 123 and press the button "next event" it will show event 117 instead of 123:
https://plnkr.co/edit/VeJmARp5N7ElYAE3?open=lib%2Fscript.js

kthorngren · November 2022

You probably already know this but the next event button for 123 has a link to 117 (href="#modal3"):

<button type="button" class="btn 
  btn-primary col-md-4 ms-auto" 
  href="#modal3" data-bs-toggle="modal" 
  data-bs-dismiss="modal">
Next Event</button>

when the table is filtered for example for the event 119, it will show both events 119, one with the ID 2 and the other with the ID 4 but if i create a "Next Event" button how do i display the next modal ID of the event that is shown in the table and not the next ID real?

That is a good question. Instead of coding the modals at the server you will need a more dynamic way to handle them in the client and use Datatables methods to find the next row. Datatables has a selector-modifier option that that can be used with the rows() API to get the rows in the currently sorted order and filtered. You would need to do something like this example and display the modal instead of the alert. And use the rows() API with the selector-modifier to find the next row.

Not sure exactly the best way to do this. Let me think about and maybe come up with a simple example.

Kevin

kthorngren · November 2022

Had some time to work up an example:
http://live.datatables.net/qebajehe/1/edit

There is one generic modal that is used. The modal data is updated when the previous and next buttons are clicked. It uses the row().index() to know which row is clicked and which rows will be the previous and next rows. It uses rows().every() to loop all the rows to find the previous and next indexes using selector-modifier of {search: "applied"}. This might be slow depending on the amount of data you have. A more efficient solution might be available if the row data has a unique value.

-1 means there isn't a previous or next row. You can disable the button if the value is -1. Or you can change it to allow for going back to the first row if on the last when next is clicked. Same for previous.

Since the cell data is the actual value, not a link, you don't need columns.render. The CSS tab has a CSS to make the first column look like links.

Kevin

DavidEscri · November 2022

First of all, i really appreciate your time, thank you so much Kevin. I've been trying your example and it's a good one you really did what i asked for, the problem is that each modal event has different information and i have around 4000 entries, each one of them is different from the previous and the modal not only shows the event ID and the description, they all are unique (all the data is from a json file which has almost 300.000 lines of information). So i can't refer the modal to the row data.

Anyway, there is no need to continue, the bosses at the top have decided that they like the website as it is right now. I'm going to just do some aesthetic changes and everything will be alright. Again, thanks a lot Kevin.

David

kthorngren · November 2022

around 4000 entries

That might be too much loop through for the solution to be usable. Not sure without trying it.

each modal event has different information

One option is to add a column that is hidden. Use columns.visible to hide the column. Change the Jinja2 template to populate this column with the HTML data you want to display in the modal. Update the modal with the HTML. Something like this:
http://live.datatables.net/qebajehe/3/edit

Even if you don't use this maybe it will help you for your next Datatables project.

Kevin

kthorngren · November 2022

I updated the example with 10000 rows and it seems to work ok:
http://live.datatables.net/juvepeja/1/edit

You will need to try this with your 4000 rows of data to see if the speed is acceptable.

Try filtering 119.

The loop is a simple one in that it is just dealing with numeric indexes and not manipulating data. Note that a changed a couple places the used this.index() to the rowIdx parameter. They are both the same thing. It should save a little time on the look of this.index().

Kevin

Multiple checkbox for the same column using bootstrap modals

Multiple checkbox for the same column using bootstrap modals

Answers

Howdy, Stranger!

Categories

DataTables

Multiple checkbox for the same column using bootstrap modals

Multiple checkbox for the same column using bootstrap modals

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables