How to add jQuery DataTable in this Javascript

Question

Is it possible to add the following jQuery DataTable?

$('#myDataTable').dataTable({

    });

to this query?

 $(document).on('click', '#PlayStatisticeight', function (e) {

    $.ajax({
        url: '@Url.Action("_PartialViewTopPlayedTracksList", "ReportStatistic")',
        type: 'GET',
        success: function (data) {
            $("#PartialViewTopPlayedTracksList").empty();
            $("#PartialViewTopPlayedTracksList").append(data);

            $('#myDataTable').dataTable({

            });


            $(function () {
                $("#PartialViewTopPlayedTracksList").load('@Url.Action("_PartialViewTopPlayedTracksList", "ReportStatistic")');
            });

        },
        error: function (xhr, textStatus, exceptionThrown) {

            var json = $.parseJSON(xhr.responseText);

            if (json.Authenticated) {
                window.location.href = '/UnAuthorizedUser/UnAuthorizedUser';
            }
            else {
                window.location.href = '/UnAuthenticatedUser/UnAuthenticatedUser';
            }
        }
    });

 });

I don't know how and if it is possible to do so? any help is highly appreciated :)

Justin Harvey · Accepted Answer · 2014-03-27 15:37:52Z

1

Yes, just call it once the new partial has been added to the DOM, in the success callback function.

        success: function (data) {

            $.ajax({
                url: '@Url.Action("_PartialViewTopPlayedTracksList", "ReportStatistic")',
                type: 'GET',
                success: function (data) {
                    $("#PartialViewTopPlayedTracksList").empty();
                    $("#PartialViewTopPlayedTracksList").append(data);
            });

    },

edited Mar 27, 2014 at 15:37

answered Mar 27, 2014 at 15:24

Justin Harvey

14.7k2 gold badges30 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Dave Over a year ago

This likely won't work, as there won't be anything to apply dataTable to until the _PartialViewTopPlayedTracksList Action loads. He'll need to do a $.get() for _PartialViewTopPlayedTracksList and then apply the dataTable in the success function for that.

pv619 Over a year ago

@Justin Thanks :) I tried it, but it didn't show the DataTable and stopped other queries from working.

pv619 Over a year ago

@Dave: Thanks :) - How can I do that? Sorry I am not very familier with jQuery.

Justin Harvey Over a year ago

@pv619, Dave has spotted it, see my updates above, this loads using a GET and appends the result.

pv619 Over a year ago

@JustinHarvey - Thanks for taking time to edit the code. I have updated my initial code with the new one. All the queries are working now but the DataTable is not showing up.

|

Ehsan Sajjad · Accepted Answer · 2014-03-27 18:07:58Z

1

you can initialize datatable, after the partialview is appended on the view in the ajax call complete function like this:

success: function (data) {

            $.ajax({
                url: '@Url.Action("_PartialViewTopPlayedTracksList", "ReportStatistic")',
                type: 'GET',
                success: function (data) {
                    $("#PartialViewTopPlayedTracksList").empty();
                    $("#PartialViewTopPlayedTracksList").append(data);

                    $('#myDataTable').dataTable({ });
            });

    }

answered Mar 27, 2014 at 18:07

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

2 Comments

pv619 Over a year ago

thanks :) it worked very much, but after final testing - the query stops other queries from working. i.e. I am also using jTables. Any suggestion? :)

Ehsan Sajjad Over a year ago

if these plugins are applied on the partial view html that is rendered dynamically, you need to initialize that plugin as well after the ajax call succes

Collectives™ on Stack Overflow

How to add jQuery DataTable in this Javascript

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related