Unable to get multiple Search Panes to show

eelliston

I have a simple datatable that fetches it data using AJAX. I am trying to get the search panes working where I can filter on 2 of the columns.

Here is the snippet. I am trying to show a pane for the AssignedSections and AssignedTags columns. AssignedSections works right now. AssignedTags is not rendering. If I swap AssignedSections and Tags around, the AssignedTags pane shows correctly and the AssignedSections pane is not longer showing.

Can someone help me find the obvious and maybe point me to a good full-working example? Thank you!

var table = $('#dataTable').DataTable({
"ajax": {
"url": "/api/AzureManagement/GetMediaItems",
"dataSrc": ""
},
dom: '<"dtsp-verticalContainer"<"dtsp-verticalPanes"P><"dtsp-dataTable"frtip>>',

        pageLength: 100,
        select: true,
        stateSave: true,
        columnDefs: [


            { "width": "15%", "targets": 0 },
            { "width": "15%", "targets": 1 },
            { "width": "25%", "targets": 2 },
            { "width": "5%", "targets": 3 },
            { "width": "10%", "targets": 4 },
            { "width": "5%", "targets": 5 },
            { "width": "5%", "targets": 6 },
        ],


        "columns": [


            { "data": "OriginalFileName" },
            { "data": "Name" },
            {
                "data": "Description",
                "render": function (data, type, row) {
                    if (data == null) {
                        return "";
                    }
                    return "<div>" + data + "</div>";
                }
            },
            {
                "data": "MediaType",
                "render": function (data, type, row) {
                    if (data.MediaType == 2) { return "Audio" }

                    return "Video"
                }
            },
            {
                "data": "AssignedSections",
                render: {
                    _: '[, ].Name',
                    sp: '[].Name'
                },
                searchPanes: {
                    orthogonal: 'sp'
                }

            },
            {
                "data": "AssignedTags",
                "render": {
                    _: '[, ].Name',
                    sp: '[].Name'
                },
                searchPanes: {
                    orthogonal: 'sp'
                }

            },

            {
                "data": "UploadedDateTime",
                "render": function (data, type, row) {

                    var dte = moment(row.UploadedDateTime).format('MM/DD/YYYY h:mm a');

                    return dte;
                }
            },

            {
                "data": "DurationSeconds",
                "render": function (data, type, row) {


                    var result = moment.utc(moment.duration(row.DurationSeconds,"seconds").asMilliseconds()).format("HH:mm:ss");
                    return result;

                }
            },

            {
                "targets": 7,
                "data": null,
                "render": function (data, type, row) {
                    var myUrl1 = '@Url.Action("PreviewVideo", "MediaManager")/' + data.ID;
                    var myUrl2 = '@Url.Action("Edit", "MediaManager")/' + data.ID;
                    var myUrl3 = '@Url.Action("Delete", "MediaManager")/' + data.ID;
                    return '<a href=\"' + myUrl1 + '\" class=\"btn btn-default btn-sm viewModal_1\">Preview</a>  <a href=\"' + myUrl2 + '\" class=\"btn btn-default btn-sm viewModal_1\">Edit</a>  <a href=\"' + myUrl3 +'\" class=\"btn btn-default btn-sm viewModal_1\">Delete</a>';

                }
            }

        ],
        order: [[1, 'desc'], [0, 'desc']]
    });

kthorngren

Likely the uniqueness threshold is keeping the pane from showing. Its controlled by the searchPanes.threshold, see this example. You can change the threshold or you can force the search pane to show, like this example.

Kevin

eelliston

That did the trick. Using this example and clearing out my local storage took care of it.

Thanks again!