jQuery UI Widgets Forums DataTable Refresh data in table from button click.

This topic contains 0 replies, has 1 voice, and was last updated by  MatthewV 3 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • MatthewV
    Participant

    I want to have my users be able to select a new date then hit the “refresh” button and have the data inside my table reloaded with the new info based off the date provided. I have tried having the button call both the $("#TimesheetWeeklyOverview").jqxDataTable("refresh"); and $("#TimesheetWeeklyOverview").jqxDataTable("updateBoundData"); commands but there is no effect even though I know the date given is good and has a different data set. I can run an alert before and after the jqx command and those work fine. What command do I use to refresh the data?

    $("#TimesheetWeeklyOverview").jqxDataTable(
        {
            width: 850,
            pagerButtonsCount: 10,
            source: new $.jqx.dataAdapter({
                dataType: "json",
                dataFields: [
                    { name: "HoursWorked", type: "number" },
                    { name: "ProjectCode", type: "string" },
                    { name: "ProjectDescription", type: "string" },
                    { name: "TaskCode", type: "string" },
                    { name: "TaskDescription", type: "string" },
                    { name: "WeekdayName", type: "string" },
                    { name: "WorkDescription", type: "string" }
                ],
                id: "ID",
                url: "/Timesheet/TimesheetWeeklyOverview?selectedEmployeeId=" + $("#SelectedEmployeeID").val() + "&selectedDate=" + $("#SelectedDate").val()
            }),
            columnsResize: true,
            columns: [
                { text: "Project Code", dataField: "ProjectCode" },
                { text: "Project Description", dataField: "ProjectDescription" },
                { text: "Task Code", dataField: "TaskCode" },
                { text: "Task Description", dataField: "TaskDescription" },
                { text: "Day Worked", dataField: "WeekdayName" },
                { text: "Hours Worked", dataField: "HoursWorked" },
                { text: "Work Description", dataField: "WorkDescription" }
            ]
        });
    Refresh data in table from button click. #87062

    Dimitar
    Participant

    Hello MatthewV,

    Please try the following approach:

    var source = {
        dataType: "json",
        dataFields: [{
            name: "HoursWorked",
            type: "number"
        }, {
            name: "ProjectCode",
            type: "string"
        }, {
            name: "ProjectDescription",
            type: "string"
        }, {
            name: "TaskCode",
            type: "string"
        }, {
            name: "TaskDescription",
            type: "string"
        }, {
            name: "WeekdayName",
            type: "string"
        }, {
            name: "WorkDescription",
            type: "string"
        }],
        id: "ID",
        url: "/Timesheet/TimesheetWeeklyOverview?selectedEmployeeId=" + $("#SelectedEmployeeID").val() + "&selectedDate=" + $("#SelectedDate").val()
    };
    
    var dataAdapter = new $.jqx.dataAdapter(source);
    
    $("#TimesheetWeeklyOverview").jqxDataTable({
        width: 850,
        pagerButtonsCount: 10,
        source: dataAdapter,
        columnsResize: true,
        columns: [{
            text: "Project Code",
            dataField: "ProjectCode"
        }, {
            text: "Project Description",
            dataField: "ProjectDescription"
        }, {
            text: "Task Code",
            dataField: "TaskCode"
        }, {
            text: "Task Description",
            dataField: "TaskDescription"
        }, {
            text: "Day Worked",
            dataField: "WeekdayName"
        }, {
            text: "Hours Worked",
            dataField: "HoursWorked"
        }, {
            text: "Work Description",
            dataField: "WorkDescription"
        }]
    });
    
    $('#refreshButton').click(function() {
        source.url = "/Timesheet/TimesheetWeeklyOverview?selectedEmployeeId=" + $("#SelectedEmployeeID").val() + "&selectedDate=" + $("#SelectedDate").val();
        dataAdapter.dataBind();
        $("#TimesheetWeeklyOverview").jqxDataTable("updateBoundData");
    });

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.