Answers

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

  March 2021 edited March 2021

  That image has a table with colspan and rowspan, they're not supported. The installation page states:

  Please also note that while DataTables supports colspan and rowspan in the table's header and footer, they are not supported in the table's tbody and must not be present.

  Colin
• ChrisKolli Posts: 28Questions: 8Answers: 0

  April 2021

  Yes I did read that, that's why I asked if there is any other way. I'm happy with the way there are just two values in a cell so that's no problem.

  Can you help with the date picker though?
  I can only find threads talking about adding a date filter to a column. But I want to add it as the default search.
• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  April 2021 edited April 2021 Answer ✓

  I can only find threads talking about adding a date filter to a column. But I want to add it as the default search.

  The same technique will work. Instead of using column().search() you would use search() to search the whole table. You can place the datepicker where you like. Then in the event handler use search() with the datepicker value. I don't have n example handy but if you want help please build a simple test case with the datepicker you are using and table data including dates in the format you are using.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• ChrisKolli Posts: 28Questions: 8Answers: 0

  April 2021

  Thank you a lot, i got it to work now I used this:

  $('#search').on( 'change', function () {
  
              var v =$(this).val();  // getting search input value
  
              table.columns(0).search(v).draw();
          } );
  
           $( ".datepicker" ).datepicker({
              dateFormat: "dd.mm.y",
              showOn: "button",
              showAnim: 'slideDown',
              showButtonPanel: true ,
              autoSize: true,
              buttonImage: "//jqueryui.com/resources/demos/datepicker/images/calendar.gif",
              buttonImageOnly: true,
              buttonText: "Select date",
              closeText: "Clear"
          });
          $(document).on("click", ".ui-datepicker-close", function(){
              $('.datepicker').val("");
              dataTable.columns(0).search("").draw();
          });
  

  for everyone else trying this; jsut add a simple input in the html:

  <input readonly="readonly" type="text" id="search" class="search datepicker" >

  if you want to show the daily data by default add this to the JS:

  function formatDate(d) {
              //get the month
              var month = d.getMonth();
              //get the day
              //convert day to string
              var day = d.getDate().toString();
              //get the year
              var year = d.getFullYear();
              //pull the last two digits of the year
              year = year.toString().substr(-2);
              //increment month by 1 since it is 0 indexed
              //converts month to a string
              month = (month + 1).toString();
              //if month is 1-9 pad right with a 0 for two digits
              if (month.length === 1)
              {
                  month = "0" + month;
              }
              //if day is between 1-9 pad right with a 0 for two digits
              if (day.length === 1)
              {
                  day = "0" + day;
              }
              //return the string "MMddyy"
              return day + '.' + month + '.' + year;
          }
          var date = new Date();
  
  table.columns(0).search(formatDate(date)).draw();
  

  and then just change the formatDate() to your preferred format.