Datatables Filtering rows by row icon's class

mcclosa

I am using a backbone collection this.courseTemplates to populate my table. One of my columns is populated by icons that have a class depending on their schedule status. This status is found by using a function checkScheduleStatus which returns either "All", "Part" or "Unscheduled". And they give the icon tags these classes respectively cpTableAllScheduledIcon, cpTablePartScheduledIcon & cpTableUnScheduledIcon I want to be able to filter rows by their schedule status returned from checkScheduleStatus

So, say I have a checkbox and I select "All" & "Part" I don't want to view any that are "unscheduled". Is this possible? Any help would be greatly appreciated.

Below is my datatables code

render: function() {
    var self = this;

    this.ui.courseTemplateTbody.empty();

    this.courseTable = $('#courseTplTable').DataTable({
        "bDestroy": true,
        "bStateSave": true,
        "deferRender": true,
        "bAutoWidth": false,
        "aLengthMenu": [
            [5, 10, 25, 50, 100],
            [5, 10, 25, 50, 100]
        ],
        "iDisplayLength": 10,
        "order": [
            [0, '']
        ],
        "columnDefs": [{
            "orderable": false,
            "targets": [0, 5]
        }, ],
        "aaData": self.courseTemplates.toJSON(),
        "aoColumns": [{
            "sTitle": "",
            "orderable": false,
            "mDataProp": function(row) {
                var status = self.checkScheduleStatus(row);
                if (status === "All") {
                    return '<i id="ctScheduleStatus" class="cpTableAllScheduledIcon octicon octicon-check protip" data-id="' + row['OptimeIndex'] + '" data-pt-title="Course Template Scheduled" data-pt-position="right" data-pt-scheme="black" data-pt-size="small"></i>';
                } else if (status === "Part") {
                    return '<i id="ctScheduleStatus" class="cpTablePartScheduledIcon fa fa-exclamation protip" data-id="' + row['OptimeIndex'] + '"  data-pt-title="Course Template Part-Scheduled" data-pt-position="right" data-pt-scheme="black" data-pt-size="small"></i>';
                } else {
                    return '<i id="ctScheduleStatus" class="cpTableUnScheduledIcon octicon octicon-x protip" data-id="' + row['OptimeIndex'] + '" data-pt-title="Course Template Unscheduled" data-pt-position="right" data-pt-scheme="black" data-pt-size="small"></i>';
                }
            }
        }, {
            "sTitle": "Course",
            "mDataProp": function(row) {
                return '<div class="cpTableCourseNameWrap">' +
                    '<div class="cpTableCourseName">' + self.getCourseTitle(row['CourseString']) + '</div>' +
                    '<div class="cpTableCourseDuration">' + self.getCourseDuration(row['CourseString']) + '</div>' +
                    '</div>';
            }

        }, {
            "sTitle": "Demand",
            "mDataProp": function(row) {
                return '<div class="cpTableCourseDemandWrap">' +
                    '<div class="hidden">' + row['NumRequired'] + '</div>' +
                    '<button data-id="' + row['OptimeIndex'] + '" class="cpTableCourseDemandBtn cpDemandDecrease" style="margin-right: 5px; border-top-left-radius: 4px; border-bottom-left-radius: 4px;">' +
                    '<i class="octicon octicon-dash"></i>' +
                    '</button>' +
                    '<input data-id="' + row['OptimeIndex'] + '" class="cpDemandInput" type="text" value="' + row['NumRequired'] + '" />' +
                    '<button data-id="' + row['OptimeIndex'] + '" class="cpTableCourseDemandBtn cpDemandIncrease" style="margin-left: 5px; border-top-right-radius: 4px; border-bottom-right-radius: 4px;">' +
                    '<i class="octicon octicon-plus"></i>' +
                    '</button>' +
                    '</div>';
            }

        }, {
            "sTitle": "Courses",
            "mDataProp": function(row) {
                return '<div id="courseCount" class="cpTableCourseCountWrap" data-id="' + row['OptimeIndex'] + '">' + row['ModuleIndexList'].length + '</div>';
            }
        }, {
            "sTitle": "Status",
            "mDataProp": function(row) {
                return '<div>' +
                    '<div class="cpTableStatusGreen protip" data-pt-title="Courses Scheduled" data-id="' + row['OptimeIndex'] + '" data-pt-position="top" data-pt-scheme="black" data-pt-size="small"><i class="octicon octicon-check"></i><span>' + self.getScheduleTotals(row['ModuleIndexList'])[0] + '</span></div>' +
                    '<div class="cpTableStatusYellow protip" data-pt-title="Courses Part Scheduled" data-id="' + row['OptimeIndex'] + '" data-pt-position="top" data-pt-scheme="black" data-pt-size="small"><i class="fa fa-exclamation"></i><span>' + self.getScheduleTotals(row['ModuleIndexList'])[1] + '</span></div>' +
                    '<div class="cpTableStatusRed protip" data-pt-title="Courses Unscheduled" data-id="' + row['OptimeIndex'] + '" data-pt-position="top" data-pt-scheme="black" data-pt-size="small"><i class="octicon octicon-x"></i><span>' + self.getScheduleTotals(row['ModuleIndexList'])[2] + '</span></div>' +
                    '</div>';
            }
        }, {
            "sTitle": "",
            "orderable": false,
            "searchable": false,
            "mDataProp": function(row) {
                return '<div class="cpTableCourseOptionsWrap">' +
                    '<div class="btn-group" role="group">' +
                    '<button class="btn btn-sm btn-primary protip cpViewCoursesBtn" data-id="' + row['OptimeIndex'] + '" data-pt-title="View Courses" data-pt-scheme="black" data-pt-position="top" data-pt-size="small"><i class="octicon octicon-eye"></i><span>View Courses</span></button>' +
                    '<button class="btn btn-sm btn-info protip cpEditTplBtn" data-id="' + row['OptimeIndex'] + '" data-pt-title="Edit Template" data-pt-scheme="black" data-pt-position="top" data-pt-size="small"><i class="octicon octicon-pencil"></i><span>Edit Template</span></button>' +
                    '<button class="btn btn-sm btn-danger protip cpDeleteTplBtn" data-id="' + row['OptimeIndex'] + '" data-pt-title="Delete Template" data-pt-scheme="black" data-pt-position="top" data-pt-size="small"><i class="octicon octicon-trashcan"></i><span>Delete Template</span></button>' +
                    '</div>' +
                    '</div>';
            }
        }]
    });

},

JammySlayer

If you use columns.render you can return a "display" for the icon and have "filter" for the text, then just create a means doing column().search() for the "filter", at least that's how I'd do it