引导表中的分页/全局搜索在 Blazor 中无法正常工作

Question

I'm using bootstrap-table in my application to achieve pagination, global search, etc. It is a single-page application that uses Blazor framework(.net 5)<\/strong> . The problem is when I run the app, it immediately shows a bootstrap table with pagination, search but then it disappears and turns to a regular bootstrap table.

@page "/"
@inherits IndexBase

   <div class="container mt-3 mb-3">
   <table class="table table-hover" id="tblCustomers"
          data-toggle="table"
          data-pagination="true"
          data-search="true"
          data-search-align="left"
          data-show-refersh="true"
          data-detail-view="true"
          data-detail-formatter="detailFormatter">
       <thead>
           <tr>
               <th data-field="Id" data-width="18" data-align="center" data-sortable="true">Cust Id</th>
               <th data-field="Name" data-width="18" data-align="center" data-sortable="true">Cust Name</th>
               <th data-field="GId" data-width="18" data-align="center" data-sortable="true">G Id</th>
               <th data-field="AccNo" data-width="18" data-align="center" data-sortable="true">Acc No</th>
               <th data-field="Active" data-width="18" data-align="center" data-sortable="true">Active</th>
               <th data-field="Key" data-width="18" data-align="center" data-sortable="true">Key</th>
               <th data-field="action" data-align="center">Action</th>
           </tr>
       </thead>
       <tbody>
           @if (Customers == null)
           {
               <tr rowspan="10">
                   <td colspan="8" style="text-align:center"> <div class="spinner">
                       <img src="/images/loader.gif" height="60" width="40"/>
                          </div>
                   </td>
               </tr>
           }
           else
               @foreach (var cust in Customers)
               {
                   <tr>
                       <td>@cust.CustomerId</td>
                       <td>@cust.CustomerName</td>
                       <td>@cust.GId</td>
                       <td>@cust.AccNo</td>
                       <td>@cust.IsActive</td>
                       <td>Not available</td>
                       <td>
                           <a href="" class="edit" style="text-decoration:none;" title="edit" @onclick="(()=>OnEdit(cust.CustomerId))" @onclick:preventDefault> <i class="fa fa-edit fa-lg fa-charade"></i></a>
                           <a href="" class="remove" style="text-decoration:none;" title="remove" @onclick="() =>OnDelete(cust)" @onclick:preventDefault> <i class="fa fa-trash fa-lg fa-charade"></i></a>
                       </td>
                   </tr>
               }
       </tbody>

   </table>

</div>

Answer 1

I had the same problem with bootstrap-table in a Blazor app. I think I got a solution.

For some reason, Blazor loads js scripts at the beginning and it seems bootstrap-table is loading correctly. But after loading, the table you want to apply bootstrap, stays in a raw style and state. I don't really know why, I guess it's a kind of Blazor behavior. (I think we should learn exactly how blazor works to know the real reason).

Anyway, few weeks ago I applied a pdf viewer tool and I follow the installing instructions. It was the same that other tools, call some js and css files... But as I was following the Blazor installing steps, I noticed that they do a kind of JS running function after render, not just importing files.

So, after this explanation I could make bootstrap-table work doing the following.

1. Import css and js files as usual into _Host.cshtml file (Or the file you're using as main file). I installed bootstrap-table files into my project but I think it could work with CDN. Of course, JS files just before close the body tag.

    ///CSS FILES
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="bootstrap-icons/font/bootstrap-icons.css" />
    <link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css" />
    
    ///JS FILES
    <script src="jquery/jquery.min.js"></script>
    <script src="bootstrap-table/bootstrap-table.min.js"></script>

2. Create a js custom file (This is going to contain the code to initialize the bootstrap-table once page is rendered). And add it after bootstrap-table.min.js reference.

    <script src="js/bootstrapTableScript.js"></script>

3. Write next code inside that file. (bootstrapTableScript.js file)

    window.bootstrapTableFunction = {
        initBootstrapTable: function () {
             $('[data-toggle="table"]').bootstrapTable();
        }
    };

4. Go to the file you want to insert the table and inject IJSRuntime interface, so you could call JS functions in Runtime

    @inject IJSRuntime JSRuntime

5. In the same razor file, insert the html table code. I used the bootstrap page sample table

    <table data-toggle="table" data-search="true">
         <thead>
             <tr>
                  <th>Item ID</th>
                  <th>Item Name</th>
                  <th>Item Price</th>
             </tr>
        </thead>
        <tbody>
             <tr>
                  <td>1</td>
                  <td>Item 1</td>
                  <td>$1</td>
             </tr>
             <tr>
                  <td>2</td>
                  <td>Item 2</td>
                  <td>$2</td>
             </tr>
        </tbody>
    </table>

6. Write this code in the same razor file (where the table is) but inside code section.

    protected override async void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeAsync<object>("bootstrapTableFunction.initBootstrapTable");
        }
    }

7. Try it! It should work This is how you should see

So, this is how it works... That OnAfterRender event is going to be ran when the razor page is already rendered. At that time, we are going to call an object called bootstrapTableFunction (the one is in your bootstrapTableScript file... Step 2 and 3). That object has a function called initBootstrapTable that is going to initialize the code that transform a simple table into a bootstrap-table. And that's it! You have your bootstrap-table.

This table example has the search function applied. So, if you want other functions like sort or so, you have to add data-sort and that kind of suff in html table, or inside bootstrapTableScript.js if you want it by javascript. Just like the official bootstrap-table documentation says.

Hope this be useful!