Base solution for your next web application
Open Closed

Problem loading table data #5099


User avatar
0
[email protected] created

We are trying to create our own entity list in the product, using the JS approach that you use, but are having issues.

We have a table that is defined as this:

<div class="row align-items-center">

                        &lt;table id=&quot;WalletsTable&quot; class=&quot;display table table-striped table-bordered table-hover dt-responsive nowrap&quot;&gt;

                            &lt;thead&gt;

                                &lt;tr&gt;

                                    &lt;th&gt;Actions&lt;/th&gt;

                                    &lt;th&gt;Coin&lt;/th&gt;                                       

                                    &lt;th&gt;Balance&lt;/th&gt;

                                    &lt;th&gt;Value&lt;/th&gt;

                                &lt;/tr&gt;

                            &lt;/thead&gt;

                        &lt;/table&gt;

                    &lt;/div&gt;

We then have this code to populate it:

var dataTable = _$walletsTable.DataTable({

        paging: true,

        serverSide: true,

        processing: true,

        listAction: {

            ajaxFunction: _clientWalletsService.getWallets

        },

        columnDefs: [

            {

                targets: 0,

                data: null,

                orderable: false,

                autoWidth: false,

                defaultContent: 'rgdf',

                rowAction: {

                    cssClass: 'btn btn-brand dropdown-toggle',

                    text: '&lt;i class=&quot;fa fa-cog&quot;&gt;&lt;/i&gt; ' + app.localize('Actions') + ' &lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;',

                    items: [{

                        text: app.localize('LoginAsThisUser'),

                        visible: true,

                        action: function (data) {

                            abp.ajax({

                                url: 'Account/Impersonate',

                                data: ''

                            });

                        }

                    }],

                },

            },

            {

                targets: 1,

                data: "currency"

            },

            {

                targets: 2,

                data: "balance"

            },

            {

                targets: 3,

                data: "value"

            }

        ]

    });

The problem we have is, that when the page initially loads, the Actions column shows, but then once the Ajax call has completed, it disappears and we are left with 3 columns.

Any ideas?


2 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Your definition seems fine actually. Please try to use a different value for the cssClas like the below one;

    cssClass: 'btn btn-xs btn-primary blue'
    

    If it doesn't work for you either, could you share your project via email so we can check it.

  • User Avatar
    0
    alirizaadiyahsi created

    Hi @[email protected], did you solve this issue?

    Could you check generated code at browser side and share this? Any browser console error are you getting?