How to only show Data for selected day with datepicker?

How to only show Data for selected day with datepicker?

ChrisKolliChrisKolli Posts: 28Questions: 8Answers: 0

Hello,

I am currently building a very complex table and I need some help, first of a picture of what it should look like in the end:

as you can see I have two tables that need to be filled with data, but i only want a single day to be shown per page since it is more like a daily calendar.
That should be selectable with a datepicker in the upper left corner.
I also want only one search bar for the whole table.

By the way any help on how to properly do those complex rows would be appreciated as I currently only got it to work by putting two values in one cell seperated by a


my current page looks like this:

I don't really know which code to show you since it is basically vanilla from the generator, i only added a few values after the fact.

The double value per cell part looks like this: but anything else is just basic atm.

columns:[ { "data": "pic", render: function ( data, type, row ) { return row.pic + '<hr>' + row.p; } }, ],

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 13,295Questions: 0Answers: 2,272
    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

  • ChrisKolliChrisKolli Posts: 28Questions: 8Answers: 0

    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.

  • kthorngrenkthorngren Posts: 14,649Questions: 25Answers: 3,478
    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

  • ChrisKolliChrisKolli Posts: 28Questions: 8Answers: 0

    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.

Sign In or Register to comment.