Answers

• colin Posts: 15,237Questions: 1Answers: 2,599

  May 2018

  Hi @Heimrich ,

  It should be table.column(3)... - not the singular. It may also be worthwhile doing it on a change event as in this example here.

  Hope that helps. If not, would you be able to link to a running example?

  Cheers,

  Colin
• Heimrich Posts: 7Questions: 2Answers: 0

  June 2018

  Thank you @Colin for your reply.

  Unfortunately using the singular form (column) didn't work out as expected. I get neither an error nor does anything happen on click except the output in the console.

  I've edited your example (hope you don't mind) and it still doesn't work, I couldn't figure out how to fix the error 'cell' undefined and it seems that it breaks the js. Now the console.log statement isn't displayed in the console also.

  You'll see that I can't use on change because I'm not populating the dropdown with the selected value. I should add that I'm working in web-development since roughly 8 months so my experience is pretty limited for now. What irritates me is that when enabling the built-in search the search works properly but not when calling this on click event. I know it's different but considering this there should be no problems with customized search on a column. My table gets populated by a handlebars template through a filled viewmodel but I think that is not an issue since the table is drawn and doesn't need to be reloaded.

  Regarding a running example I would have to give out credentials to log in so I don't think this would be an option.

  Many thanks though and hopefully we figure out the issue. If not I may be able to set this page as public so I could deliver a running example.

  Greetings,

  Heimrich
• colin Posts: 15,237Questions: 1Answers: 2,599

  June 2018 edited June 2018

  Hi @Heimrich ,

  The 'cell' error is because there was one column missing in the header. Your buttons were working, see this new example here. I've also added a 'Clear' to remove the selection.

  If you want to keep the dropdowns in the header, you'll need to change the logic slightly, since the two ways of selecting (button and dropdown) aren't integrated well - to do that, I would remove the search from the buttons, and just make the button make the dropdown selection. That's trivial, so I can do that if you'd like to see how that would look.

  Cheers,

  Colin

  p.s. I've been working in web development for even less, but we'll get there
• Heimrich Posts: 7Questions: 2Answers: 0

  June 2018 edited June 2018

  Hey @Colin,

  many thanks again. I really appreciate your friendly replies and support.

  My bad with the missing cell. But this led me now to the assumption that I've a pretty non-trivial issue considering that the datatable gets populated from a handlebars template with more td's than there are th's due to using if conditions. But then again the table is already drawn without the non-necessary td's due to the if-conditions. The dropdown or let me say the div with all the filters I wanna realize sits in a row above the row containing the table.

  This is the structure of the table content

  <script id="tasks-template" type="text/x-handlebars-template">
      <tr class="clickable-row">
          <td><span class="title" title="{{Title}}">{{{Title}}}</span></td>
          <td>{{{DueDate}}}</td>
          <td><span class="type">{{{TaskTypeListItem}}}</span></td>
          <td><span>{{{TaskPrioListItem}}}</span></td>
          <td><span>{{{ResponsibleUserFullName}}}</span></td>
          {{#if HasFirstname}}
          <td><span class="person" data-id="{{ContactId}}">{{{PersonFirstname}}} {{{CompanyName}}}</span></td>
          {{else}}
          <td><span class="company" data-id="{{ContactId}}">{{{CompanyName}}}</span></td>
          {{/if}}
          {{#if HasFirstname}}
          <td><span class="contactperson" data-id="{{ContactId}}">{{{ContactPersonFullName}}}</span></td>
          {{else}}
          <td><span class="contactcompany" data-id="{{ContactId}}">{{{ContactPersonFullName}}}</span></td>
          {{/if}}
          <td><a href="mailto:{{{ContactPersonEmail}}}">{{{ContactPersonEmail}}}</a></td>
          <td><a href="tel:{{{ContactPersonPhone}}}">{{{ContactPersonPhone}}}</a></td>
          <td><button class="partial-action edit">@Html.Translate("Edit")</button><button style="float: right;" class="partial-action completed">@Html.Translate("Done")</button></td>
          <td>{{Id}}</td>
      </tr>
  </script>
  

  This content gets inserted into the #tasks div

  <div class="table-responsive">
                      <table id="tasks-table" class="table table-striped table-hover" width="100%">
                          <thead>
                              <tr>
                                  <th>@Html.Translate("Title")</th>
                                  <th>@Html.Translate("DueDate")</th>
                                  <th>@Html.Translate("Type")</th>
                                  <th>@Html.Translate("Priority")</th>
                                  <th>@Html.Translate("ResponsiblePerson")</th>
                                  <th>@Html.Translate("Company")</th>
                                  <th>@Html.Translate("ContactPerson")</th>
                                  <th>@Html.Translate("Email")</th>
                                  <th>@Html.Translate("Phone")</th>
                                  <th>@Html.Translate("Actions")</th>
                                  <th></th>
                              </tr>
                          </thead>
                          <tbody id="tasks"></tbody>
                      </table>
                  </div>
  

  Since there are no errors and the exact same on click event works in the live demo I can't wrap my head around where the problem could lie other than the issue with more rows in the table structure than in the actual table. But editing rows getting specific column values works as expected.

  Example for column 3 when editing

          tds[3].innerHTML = priosDropdown;
  

  Puts the prioDropdown exactly in column 3.

  Here's also how I initialize the table with the on click event for filtering priotities just below the initialization.

  var table = $('#tasks-table').DataTable({
          "responsive": true,
          "sortable": true,
          "searching": true,
          "retrieve": true,
          "scrollX": false,
          "paging": true,
          "info": false,
          "searching": false,
          "lengthMenu": [10, 25, 50, 75, 100],
          "pageLength": 10,
          "order": [
              [1, "asc"]
          ],
          "columnDefs": [{
                  targets: 1,
                  type: 'date-eur'
              },
              {
                  targets: 10,
                  visible: false
              },
              {
                  targets: 9,
                  orderable: false
              }
          ]
      });
  
      /* CUSTOM FILTERS */
  
      // Priorities
      $('.selectedPrio').on('click', function () {
          var prio = $(this).val();
          console.debug(prio);
  
          table.column(3).search(prio).draw();
      });
  

  I guess it's either a very trivial issue like missing options or html tags or it's very non-trivial because of using handlebars. Too bad no errors get thrown.
• colin Posts: 15,237Questions: 1Answers: 2,599

  June 2018 Answer ✓

  Hi @Heimrich ,

  Is it possible to send us a link to the page that's causing the problem? If so, we could take a look and see if there's anything obviously wrong.

  If not, another thing to try would be to see if the search works in the console.

  table = $('#tasks-table').DataTable()
  table.column(3).search(3).draw()
  

  If that works, then you know the DataTables aspect is fine.

  Cheers,

  Colin
• Heimrich Posts: 7Questions: 2Answers: 0

  June 2018

  Hey @Colin,

  alright. I'll check that and will message you the credentials and website so that you'll have permission on only this specific site. Thanks and have a good lunch!
• Heimrich Posts: 7Questions: 2Answers: 0

  June 2018 edited June 2018

  Hi @Colin,

  Thanks to your last post I figured out what made the filter not working... Setting the option "searching" to false... I always only checked if the searching works not both and believed it is independent from the search engine. Looks like I have to hide the searchfield now. Even my date filters work I implemented this morning.

  So I think when someone elses got a similar issue regarding search method while not being able to trace the error one should ask first if he has set the searching option to true.

  Many thanks though for your awesome support and time @Colin and have a great weekend.

  Cheers,

  Heimi
• colin Posts: 15,237Questions: 1Answers: 2,599

  June 2018

  Hi Heimi,

  Ha, of course, obvious now when looking at the table config! Have a great weekend too

  Cheers,

  Colin