Draw Datatable in initComplete failing

jqueryusr

I have DataTable using server side processing. I added two buttons that clears the search / filtering upon click in the initComplete. Upon search or clear buttons click, it makes a ajax request but the datatable does not draw.

$('#datatable').DataTable({

                initComplete: function () {
                    var input = $('.dataTables_filter input').unbind(),
                        self = this.api(),
                        $searchButton = $('<button>')
                            .text('search')
                            .click(function () {
                                self.search(input.val()).draw();
                                //self.ajax.reload(); This does not work either;
                            })
                            ,
                        $clearButton = $('<button>')
                            .text('clear')
                            .click(function () {
                                input.val('');
                                $searchButton.click();
                            })
                    $('.dataTables_filter').append($searchButton, $clearButton);
                },

                processing: true,
                serverSide: true,
                ordering: true,
                paging: true,
                order:[[0, 'asc'], [1, 'asc'], [2, 'asc']],
                orderMulti: false,
                ajax: {
                    type: "POST",
                    url: "DataHandler.ashx",
                    data: function (d) {
                        var pageInfo = $('#datatable').DataTable().page.info();
                        var orderInfo = $('#datatable').DataTable().settings().order();
                        var searchInfo = $('#datatable').DataTable().settings().search();


                        return JSON.stringify({
                            "displayLengthJS": pageInfo.length,
                            "displayStartJS": pageInfo.start, 
                            "sortColJS": orderInfo[0][0],
                            "sortDirJS": orderInfo[0][1],
                            "sortJS": $('#drpSort').val(), 
                            "searchStrJS": searchInfo
                           });
                    },
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                    //success: function (response)  { alert("success");},
                    //failure: function (response)  { alert('fail'); },
                    //error: function (response) { debugger; alert('error'); }
                },
                columns: [
                    { data: 'FirstName' },
                    { data: 'LastName' },
                    { data: 'Notes' }
                ]
            });

kthorngren

Thats an interesting solution. It seems to work in this test case:
http://live.datatables.net/bepaturo/1/edit

Please update the test case or post a link to your page to show the issue.

Kevin