Quantcast
Channel: DataTables 1.10 — DataTables forums
Viewing all articles
Browse latest Browse all 2364

How to use EXTERNAL jquery datpicker to cause ajax to refrsh data table with different information

$
0
0

I added a datepicker to allow users to change the filter set on a (large) database. I want the datepicker to cause an ajax refresh to my table. (passed parameters are an ID and an integer date code of the format yyyymm. The ajax function called is the one which initially loads the page.
Here is my code:

       var dirTable = $("#dirTable").DataTable( {
            dom: "Bflrtip",
            "serverSide": false,
            ajax:   {
                "url":  "/components/com_insight/ajax/resource/ajaxDirDetail.php",
                "type": "POST",
                data: function(d) {
                    d.dirId="' . $dirId .'";
                    d.dateCode="'.$dateCode.'";
                }                                
            },............

        $(function() {
            $(".date-picker").datepicker( {
                yearRange: "2015:" + new Date().getFullYear(),
                dateFormat: "yyyymm",
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                dateFormat: "MM yy",
                onClose: function(dateText, inst) {
                    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $(this).datepicker("setDate", new Date(year, month, 1));
                    var monthcode = (month*1+1);
                    var sMonthCode = monthcode.toString();
                    if (sMonthCode.length =1) {sMonthCode = 0+sMonthCode}
                    var dateCodeParam = year+sMonthCode;
                    var selDirId = document.getElementById("dirId");
                    var selDir = selDirId.options[selDirId.selectedIndex].value;
                    //alert(dateCodeParam + " " + selDir);
                    $.ajax({
                        url: "/components/com_insight/ajax/resource/ajaxDirDetail.php",
                        type: "POST",
                        data: { dirId:selDir, dateCode: dateCodeParam},
                        success: function(result){
                                $("#dirTable").DataTable.clear();
                                $("#dirTable").DataTable.draw();
                                $("#dirTable").DataTable.rows.add(result);
                $("#dirTable").DataTable.draw();
                        }
                     });
                }
            });
        });

My attempt to redraw the table
success: function(result){ $("#dirTable").DataTable.clear(); $("#dirTable").DataTable.draw(); $("#dirTable").DataTable.rows.add(result); $("#dirTable").DataTable.draw();

leads to an unknown function error. I am sure I have the context inccorect, but I do not know how to fix this. Any help would be appreciated!


Viewing all articles
Browse latest Browse all 2364

Trending Articles