Bootstrap table using sorting (five)-page combination Query

One, page combination of query

/* * Data-pagination Specifies whether paging is enabled * data-page-list Specifies the page data amount for paging array ' [5,10] ' * data-side-pagination Specifies whether paging is the server/client * Special NOTE: * Client, request parameters: * Search: Text box content, change in text box content is auto Submit request * Order: Sort by * Sort: Sort Column name * Offset: Across the number of bars * Limit: Number of bars to get data * */var $t able1= $ (' #table1 '). Bootstraptable ({columns: [{field: ' Sno ', title: ' Student Number ', sortable:true}, {field  : ' Sname ', title: ' Student Name '}, {field: ' Ssex ', title: ' Sex '}, {field: ' Sbirthday ', title: ' Birthday '}, { Field: ' Class ', Title: ' Course Number '},], url: ' @Url. Action ("Getstulist", "DataOne") ', Pagination:true, Sidepa
        Gination: ' Server ', pagelist:[5,10,20,50], queryparams:function (params) {params.name = ' Zhang Sanfeng '; In particular, the value of the returned parameter is NULL, and the current parameter is not sent to the server side//This specifies the way the request parameter is similar to the DataTables control price params.sex = $ (' input[name= ' Sex "]:checked '). V
        Al ();
    return params;
}
}); Refresh method $ (' #heartBtn '). Click (function () {$table 1.bootstrapTable (' Refresh ');});

<table id= "table1" data-classes= "table Table-hover" Data-search= "true" data-show-refresh= "true" Data-show-toggle= "true" data-show-columns= "true" data-toolbar= "#toolbar" ></table> <div id= "Toolbar" > <div class= "Btn-group" > <button class= "btn btn-default" > <i class= "gl Yphicon glyphicon-plus "></i> </button> <button class=" btn Btn-default "> & Lt;i class= "Glyphicon glyphicon-heart" id= "heartbtn" ></i> </button> <button class= "Btn b 
    Tn-default "> <i class=" Glyphicon glyphicon-trash "></i> </button> </div> <div class= "Form-group" > <label class= "Control-label" > Sex:</label> <label class= "  Radio-inline "> <input type=" Radio "name=" Sex "value=" male "/> Men </label> <label Class= "Radio-inline"; <input type= "Radio" name= "Sex" value= "women"/> Women </label> </div> </div>

2. Service-Side code processing

Public Jsonresult getstulist (String sex, string search, string sort, string order, int offset, int limit)
{
    var qu ery = _context.student.asqueryable ();
    if (string. IsNullOrEmpty (Sex) = = false)
        query = query. Where (q = q.ssex = = Sex);
    if (string. IsNullOrEmpty (search) = = false)
        query = query. Where (q = q.sno.contains (search) | | q.sname.contains (search));
    Sort
    if (sort = = "Sno")
    {
        if (order = = "ASC")
            query = query. (q = q.sno);
        else
            query = query. OrderByDescending (q = q.sno);
    }
    else
        query = query. (q = q.sbirthday);

    int total = query. Count ();
    var list = query. Skip (offset). Take (limit). ToList ();
    Return Json (new
    {
        rows = list, total
        = Total
    });
}

More:

Bootstrap table using finishing (four)-toolbars

Bootstrap Table use finishing (iii)

Bootstrap Table use finishing (ii)

With multi-extension use reference: http://www.cnblogs.com/landeanfen/p/5005367.html