Using jQuery Datatables on an ASP .NET GridView control

Lately, I've been using jQuery DataTables within several custom SharePoint apps that I've created; however, I've recently resurrected an ASP .NET Web Forms application that I was working on many moons ago and wanted to leverage jQuery DataTables on a GridView control that I'm using in this application.

What I discovered is that the crux of the matter when attempting to layer jQuery DataTables over a GridView control is that you need to format the HTML of the GridView so that it's recognizable by the DataTables code.  Essentially, your GridView needs to be formatted like so in order for it to be recognized:

<table>
     <thead>
          <tr>
               <th></th>
          </tr>
     </thead>
     <tbody>
          <tr>
               <td></td>
          </tr>
     </tbody>
</table>

Here is what you can do at the very minimum to make this happen:

ASPX Page:

<script  type="text/javascript" language="javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/jquery.datatables.min.js"></script>
<link type="text/css" href="Content/jquery.dataTables.min.css" rel="stylesheet" />

<div class="row">
     <div class="col-md-4">
   
          <asp:GridView ID="GridView1" runat="server" CssClass="gvdatatable" AutoGenerateColumns="true" OnPreRender="GridView1_PreRender">
          </asp:GridView>
     </div>
</div>

<script type="text/javascript">
     $(document).ready(function () {
           $('.gvdatatable').dataTable({});
     });
</script>

ASPX Page Code-Behind:

protected void Page_Load(object sender, EventArgs e)
{
}

protected void GridView1_PreRender(object sender, EventArgs e)
{
     GridView1.DataSource = GetData();  //GetData is your method that you will use to obtain the data you're populating the GridView with

     GridView1.DataBind();

     if (GridView1.Rows.Count > 0)
     {
           //Replace the <td> with <th> and adds the scope attribute
           GridView1.UseAccessibleHeader = true;

          //Adds the <thead> and <tbody> elements required for DataTables to work
          GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

           //Adds the <tfoot> element required for DataTables to work
           GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
      }

}

This code has been simplified from my original work, but I wanted to provide you with the bare bones minimum code that's needed so that you can get an idea of how to bolt this onto your existing project.  Hope this helps!

How to filter multiple metadata fields when using the SharePoint REST API

To place a filter on multiple metadata fields when you're leveraging the SharePoint REST API to extract information from a SharePoint list or document library, you can utilize the $filter operator; however, you'll need to be careful with how you structure the query or you'll get an error when submitting the request.

To combine these filters, you will need to utilize parentheses to seperate each unique filter operator.  To demonstrate this technique, I'm going to place two filters in my query that will be used to filter on two different metadata fields:

http://SharePointWebApp/SharePointSite/_api/web/lists/getbytitle('Documents')/items?$select=Name,LinkFilename&$filter=((Field1%20eq%20'FilterValueOnField1')%20and%20(Field2%20eq%20'FilterValueOnField2'))&$orderby=Name%20asc

Essentially, the basics of the REST call is that it will obtain the the Name and LinkFilename fields from documents contained in the default Documents library and order the results alphabetically. These results will be filtered so that only documents that have a value in Field1 equal to the specified value of FilterValueOnField1 and a value in Field2 equal to the specified value of FilterValueOnField2.

Use jQuery to programmatically parse the text from an HTML element

If you ever run into a situation in which you need to programmatically remove the HTML tags from an HTML element in order to get the text contained within it, jQuery has a very nice option for this using the jQuery.text() method.  Here is a brutally simple example of how it works:

var htmlText = "<a href='#' target='_blank'>I need this text</a>";
var textINeed = $(htmlText).text();
alert(textINeed);

Naturally, real-life situations are going to be far more complex than this, but I thought this might get you pointed in the right direction.