1

I would like to display Search API results like OOTB Sharepoint list with filtering at least. Is it possible to use SharePoint javascript libraries to achieve this? If not, is there any jquery/javascript library which might help display results in table form?

enter image description here

1
  • why don´t you use a search result Webpart together with a refining Webpart on your page? Aug 26, 2015 at 8:58

1 Answer 1

1

I've been using the DataTables plugin for jQuery Javascript library to build lists with full sorting, filtering, etc. functionality using the SharePoint API. The library is pretty easy to use and there are additional extensions and plugins.

As an example, here's a simple initialization of a DataTable with a filter added to the 2nd column that I built a few weeks ago:

<!-- DataTables CSS -->
<link href="../jquery.dataTables.css" rel="stylesheet" type="text/css"/>

<!-- jQuery -->
<script src="../jquery.min.js" type="text/javascript" charset="utf8"></script>

<!-- DataTables -->
<script src="../jquery.dataTables.js" type="text/javascript" charset="utf8"></script>

<script type="text/javascript">
    $(document).ready(function() {
        // creates DataTable for planning documents
        var table = $('#planning-docs').DataTable({
            "columns" : [ 
                {"width": "456px"}, 
                {"width": "304px"}
            ],
            "info" : false,
            "lengthChange": false,
            "pageLength": 7
        });

        // adds drop-down filter to 2nd column
        var selectValues = [""];
        table.column(1).data().each(function(val, index) {
            if(selectValues.indexOf(val) == -1) {
                selectValues.push(val);
                selectValues.sort();
            }
        });

        var sel = $('<select></select>');
        selectValues.forEach(function(val, index) {
            sel.append('<option value="' + val + '">' + val + '</option>');
        });

        sel.insertBefore($('#planning-docs_filter'));

        var label = $('<label>Select Document Type:</label>');
        label.insertBefore(sel);

        sel.on('keyup click', function() {
            table.column(1).search($(this).val()).draw();
        });

    });

</script>
2
  • Thanks for the code clk.I saw this DataTable plugin while I was searching for examples on the web, but I did not consider it as I thought it will not have filtering. I will give it a try. I will let you know how I have progressed.
    – Imir Hoxha
    Aug 26, 2015 at 18:52
  • The default DataTable initialization also includes a search field that filters while you type. I pretty much use this as my filter for lists, but did use the drop-down in the code above per my requirements. datatables.net/reference/option/search
    – clk
    Aug 26, 2015 at 19:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.