Bind a datatable to a bootstrap table

Question

I want to bind a datatable to a bootstrap table. The datatable is a result of a sql query. I have seen that there are ways to do this with json. But I'm new to json and can't understand those methods. Can anyone explain how to do this? Thanks in advance.

Answer 1

To do it without Json, you can use a DataRepeater with an item template:

<table>
    <asp:Repeater id="tableRepeater" runat="server" DataSourceID="TableDataSource">
        <ItemTemplate>
            <tr>
                <td><%# Eval("TableProperty") %></td>
            </tr>
         </ItemTemplate>
     </asp:repeater>
</table>

You can just do the same with div or whatever you like inside the ItemTemplate, and that will be repeated for each row in the query. You can add whatever bootstrap classes you need to make it work.

Answer 2

If you don't want to use MVC,

In the Back-end part add:

string query;
SqlCommand SqlCommand;
SqlDataReader result;
int sindex=DropDownList1.SelectedIndex+1;
int hindex =DropDownList3.SelectedIndex+1;
SqlDataAdapter adapter = new SqlDataAdapter();
//Open the connection to db
conn.Open();                
query = string.Format("select * from table where clumn='"+s+"' ", s);
SqlCommand = new SqlCommand(query, conn);
adapter.SelectCommand = new SqlCommand(query, conn);              
result = SqlCommand.ExecuteReader();               

And in the front end part:

<div class="row" style="color:#ba9494;margin-top:15%;margin-left:5%">
    <div class="col-lg-2 align-center" >
          Id
    </div>
    <div class="col-lg-2 align-center">
          Name
    </div>
    <div class="col-lg-1 align-center">
        OtherIds
    </div> 
    <div class="col-lg-7 align-center">
        Description
    </div>

</div>

foreach (var item in result)
{
  <div class="row" style="margin-left:5%">
    <div class="col-lg-2 align-center">
           item.Id
    </div>
    <div class="col-lg-2 align-center">
           item.Names
    </div>
    <div class="col-lg-1 align-center">
           item.OthersId
    </div>      
    <div class="col-lg-7 align-center">
           item.Descriptions
    </div>
  </div>

}

Answer 3

You don't have to use json. If you are familiar with ASP.NET MVC then this is very simple,just make your database, import it with models and in your views just call your model and the item it contains. Example:

@model IEnumerable<NameOfYourProject.Models.ModelResultName>

@{
   ViewBag.Title = "ABC";
   Layout = "~/Views/Shared/_PQR.cshtml";
}
    <div class="row" style="color:#ba9494;margin-top:15%;margin-left:5%">
      <div class="col-lg-2 align-center" >
          Id
      </div>
    <div class="col-lg-2 align-center">
          Name
    </div>
    <div class="col-lg-1 align-center">
        OtherIds
    </div> 
    <div class="col-lg-7 align-center">
        Description
    </div>

</div>

@foreach (var item in Model)
{
    <div class="row" style="margin-left:5%">
        <div class="col-lg-2 align-center">
               @item.Id
        </div>
        <div class="col-lg-2 align-center">
               @item.Names
        </div>
        <div class="col-lg-1 align-center">
               @item.OthersId
        </div>      
        <div class="col-lg-7 align-center">
               @item.Descriptions
        </div>
    </div>

}

The above @foreach code also works for other projects besides MVC too. Hope you got your answer.

Answer 4

This might help to get hold of the json: How to get SQL Server query result's data into JSON Format ?

Then something like this in your script?

    $('#elementSelector').bootstrapTable({
        data: yourDataGoesHere,
        onLoadError: function () { // deal with error },
        columns: [
            { field: 'dataFieldName', title: 'aTitle', class: 'col-md-4', sortable: true }
        ]
    });