How to do offline sorting in bootgrid?

Suppose I fetched the data from api and during sort, don't want to hit the api please help if it is possible in bootgrid like datatable.

I have this function for bootgrid load can please help on this.

function generateBootGrid(pd) {
$(pd.gridId).bootgrid({
    ajax: true,
    rowSelect: true,
    navigation: 0,
    sort: true,
    search: false,
    post: function ()
    {
        /* To accumulate custom parameter with the request object */
        return getCustomPramas();
    },
    url: baseUrl + pd.fireUrl+'?get_of_year='+$('#get_of_year').val(),
    templates: {
        search: ""
    },
    responseHandler: function (data) {
        console.log(data);
        $(pd.totalPriceId).html(data.totalCost);
        return data;
    },
    formatters: {
        "commands": function (column, row)
        {
            return "<button type=\"button\" class=\"btn btn-xs btn-default " + pd.editButtonClass + "\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-edit\"></span></button> ";
        }
    }
})

requiredBootGridParms = {
    gridId: "#educational-expenses",
    fireUrl: "/pedagogical-action/get-educational-expenses/",
    totalPriceId: "#totalEduCost",
    editButtonClass: "command-edit",
};

generateBootGrid(requiredBootGridParms);

This is the html for this grid

 <table id="educational-expenses" class="table table-condensed table-hover table-striped" width="60%" cellspacing="0" >
        <thead>
            <tr>
                <th data-column-id="account_number" data-type="numeric" data-identifier="true">Account Number</th>
                <th data-column-id="account_name"  data-order="desc">Account Name</th>
                <th data-column-id="amount">Amount</th>
            </tr>
        </thead>
    </table>
    <button type="button" class="btn btn-xs btn-primary" id="command-add" data-row-id="0">
        <span class="glyphicon glyphicon-plus"></span></button>
    <span class="text-danger float-right">Total educational costs - A:  <span class="text-danger" id="totalEduCost">00.00</span></span> 

Thanks

It's possible. You need to do an ajax request by yourself, then populate the bootgrid manually. You also need to configure bootgrid not to use ajax.

function generateBootGrid(pd) {

    var grid = $(pd.gridId).bootgrid({
        ajax: false,
        rowSelect: true,
        navigation: 0,
        sort: true,
        search: false,
        templates: {
            search: ""
        },
        formatters: {
            "commands": function (column, row)
            {
                return "<button type=\"button\" class=\"btn btn-xs btn-default " + pd.editButtonClass + "\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-edit\"></span></button> ";
            }
        }
    });

    return grid;

}

function loadData(pd, grid) {
    var url = baseUrl + pd.fireUrl+'?get_of_year='+$('#get_of_year').val();
    var data = getCustomPramas();
    $.post(url, data)
    .done(function (data) {
        console.log(data);
        data = JSON.parse(data);
        $(pd.totalPriceId).html(data.totalCost);

        grid.bootgrid('clear');
        grid.bootgrid('append', data.rows);
    });
}

requiredBootGridParms = {
    gridId: "#educational-expenses",
    fireUrl: "/pedagogical-action/get-educational-expenses/",
    totalPriceId: "#totalEduCost",
    editButtonClass: "command-edit",
};

var grid = generateBootGrid(requiredBootGridParms);
loadData(requiredBootGridParms, grid);

The API method should return something like this:

public IHttpActionResult Get()
{
    var model = new ExpensesViewModel();
    model.totalCost = 1000.53;
    model.rows = new List<ItemViewModel>();
    model.rows.Add(new User("John"));
    model.rows.Add(new User("Darin"));
    model.rows.Add(new User("BalusC"));
    return Ok(model);
}

I used C# Web.API as example, but you may use any backend as you wish.

...and the data returned by your API should be something like this json:

{
    totalCost: 1000.53,
    rows: [
        { id: 1, cost: 50 },
        { id: 2, cost: 130 },
        { id: 13 cost: 25 }
    ]
}

With this approach, bootgrid will do sort, pagination and search on the client, without sending requests automatically to the API.

However, take note this approach works only if the API is returning all the data you need in the grid. So if you had 100 rows, your API should return those 100 rows once (and the same applies for DataTable).