CODEWITHSUNDEEP
twitter-bootstrapbootstrap-table
Roberto Vanoli
Roberto Vanoli

Reputation: 459

Bootstrap-Table in ajax partial view is not working

I'm developing a web app with aspnet core and bootstrap and I need to sort a simple table hosted in a partial view named 'mytable.cshtml'. The partial view must be loaded dinamically after an Ajax call.

I'm using the bootstrap-table plugin to sort the table in the following way: 

<table id="table" data-toggle="table" class="table">
        <thead>
            <tr>
                <th data-sortable="true">column 1</th>
                <th data-sortable="true">column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>aaa</td>
                <td>111</td>
            </tr>
            <tr>
                <td>bbb</td>
                <td>222</td>
            </tr>
            <tr>
                <td>ccc</td>
                <td>333</td>
            </tr>
        </tbody>
    </table>

First I tested that all it's fine, loading the partial view in this way

@Html.Partial("mytable");

The view is loaded, the table is correcty formatted, column headers have icons for sorting, clicking on header the content is ordered.

Now I try to load the partial view with an Ajax call when a link is clicked : 

<a [email protected]("GetMyTable"})  onclick="LoadMyTable()"/>
//LoadMyTable() script omitted ...

as before the partial view is loaded correctly, the table is shown and formatted, but columns cannot be sorted: the sorting icon is not shown and clicking on column headers nothing happens

someone have experienced this behaviour and can suggest me some workaround? as an alternative, could anyone who has faced a similar scenario to suggest me how to proceed - eventually using a different plugin ?

thankyou very much for any hint

Upvotes: 0

Views: 1262

Answers (1)

harri
harri

Reputation: 26

You can use JavaScript. First make sure you added id="table" to your table tag, like 

<table id="table" class='table' data-toggle="table">

Second add JS at the end of your partial file (maybe this is not strict):

<script type="text/javascript">
     $('#table').bootstrapTable();
</script>

Upvotes: 1

Related Questions