Я использую jquery datatables 1.10 и пытаюсь найти и отфильтровать таблицу. Я хотел бы использовать текстовое поле поиска, которое выполняет поиск в двух столбцах, и флажок для фильтрации результатов третьего столбца. Вот мои данные:

var url = '@Url.Action("SupportClass1Search", "SupportClass1")';
$('#SupportClass1DataTable').DataTable({
    "serverSide": true,
    "processing": true,
    "ajax": url,
    "ordering": true,
    "dom": '<"top"prl<"clear">>t<"bottom">pi<"clear">',
    "pageLength": 10,
    "autoWidth": false,
    "columns": [
        { // create a link column using the value of the column as the link text
            "data": "SupportClass1Id",
            "width": "20%",
            "render": function (oObj) { return "<a href='#' onclick='editItem(\"" + oObj + "\")'>" + oObj + "</a>"; },
        },
        { "data": "SupportClass1Name", "sWidth": "70%" },
        { // convert boolean values to Yes/No
            "data": "Active",
            "width": "7%",
            "render": function (data, type, full) {
                if (data == true)
                { return 'Yes'; }
                else
                { return 'No'; }
            }
        }
    ]
})

Я хочу отфильтровать 3-й столбец (активный) на основе значения флажка. Приведенный ниже JS работает для фильтрации таблицы, но не захватывает столбец Active, когда я ввожу «Да» или «Нет»:

// use an outside search input
oTable = $('#SupportClass1DataTable').DataTable();

$('#btnSearch').click(function () {
    oTable.search($('#txtSearch').val()).draw();
})

Кроме того, я бы предпочел искать столбец Active отдельно, примерно так:

oTable
    .column(2).search('Yes')
    .columns([0,1]).search($('#txtSearch').val())
    .draw();

Но это не работает. Любая помощь приветствуется

0
steveareeno 30 Авг 2014 в 22:35
Вы можете проверить мой фильтр yadcf для таблиц данных, он имеет 9 различных типов фильтров с интеграцией с другими сторонними плагинами yadcf-showcase .appspot.com github.com/vedmack/yadcf
 – 
Daniel
30 Авг 2014 в 22:40

2 ответа

Лучший ответ

Я понял. Используя версию 1.10, вы должны использовать ajax.data:

https://datatables.net/reference/option/ajax.data

В своей инициализации я использовал следующее, чтобы добавить дополнительный параметр к моему вызову ajax:

"ajax": {
    "url": url,
    "data": function (d) {
        d.activeOnly = $('#activeOnly').is(':checked');
    }
},

Вот моя полная инициализация:

$(document).ready(function () {
    // initialize the data table
    var url = '@Url.Action("SupportClass1Search", "SupportClass1")';
    $('#SupportClass1DataTable').DataTable({
        "serverSide": true,
        "processing": true,
        "ajax": url,
        "ordering": true,
        "dom": '<"top"prl<"clear">>t<"bottom">pi<"clear">',
        "pageLength": 10,
        "autoWidth": false,
        "ajax": {
            "url": url,
            "data": function (d) {
                d.activeOnly = $('#activeOnly').is(':checked');
            }
        },
        "columns": [
            { // create a link column using the value of the column as the link text
                "data": "SupportClass1Id",
                "width": "20%",
                "render": function (oObj) { return "<a href='#' onclick='editItem(\"" + oObj + "\")'>" + oObj + "</a>"; },
            },
            { "data": "SupportClass1Name", "sWidth": "70%" },
            { // convert boolean values to Yes/No
                "data": "Active",
                "width": "7%",
                "render": function (data, type, full) {
                    if (data == true)
                    { return 'Yes'; }
                    else
                    { return 'No'; }
                }
            }
        ]
    })

    oTable = $('#SupportClass1DataTable').DataTable();

    // this is a checkbox outside the datatable 
    // whose value I wanted to pass back to my controller

    $('#activeOnly').click(function () {
        oTable.search($('#txtSearch').val()).draw();
    })

    $('#btnSearch').click(function () {
        oTable.search($('#txtSearch').val()).draw();
    })
});

Я использую класс в качестве модели для DataTable. Я также добавил сюда параметр / свойство activeOnly:

/// <summary>
/// this class provides a model to use with JQuery DataTables plugin
/// </summary>
public class jQueryDataTableParamModel
{
    #region DataTable specific properties
    /// <summary>
    /// Request sequence number sent by DataTable,
    /// same value must be returned in response
    /// </summary>       
    public string draw { get; set; }

    /// <summary>
    /// Number of records that should be shown in table
    /// </summary>
    public int length { get; set; }

    /// <summary>
    /// First record that should be shown(used for paging)
    /// </summary>
    public int start { get; set; }
    #endregion

    #region Custom properties

    public bool activeOnly { get; set; }

    #endregion
}

Это мой контроллер:

public ActionResult SupportClass1Search(jQueryDataTableParamModel param)
{
    // initialize the datatable from the HTTP request
    var searchString = Request["search[value]"];
    var sortColumnIndex = Convert.ToInt32(Request["order[0][column]"]);
    var sortDirection = Request["order[0][dir]"]; // asc or desc

    // query the database and output to a viewmodel
    var lvm = new SupportClass1SearchViewModel { };
    if (String.IsNullOrEmpty(searchString))
    {
        lvm.SupportClass1List = supportClass1Service.GetAll();
    }
    else
    {
        lvm.SupportClass1List = supportClass1Service.FindBy(t => (t.SupportClass1Name.Contains(searchString))
            && (t.Active.Equals(param.activeOnly) || param.activeOnly == false));
    }

    // do a bunch of stuff and retunr a json string of the data
    return MyJson;
}

Теперь, когда я устанавливаю флажок activeOnly, он перерисовывает таблицу, передавая контроллеру true или false.

0
steveareeno 3 Сен 2014 в 00:00

Вы можете использовать подключаемый модуль columnfilter http: // jquery-datatables -column-filter.googlecode.com/svn/trunk/index.html (плагин jQuery Datatables), поскольку он может делать многое из того, что вы ищете. Вот пример в демонстрации jsFiddle здесь. В этом примере я использую 2 поля для фильтрации текста, а третье - раскрывающийся список.

    oTable = $("#myTable").dataTable({
    bInfo: false,
    bSort: false,
    bSortable: false,
        "data": arrayData,
        "columns": [{
        "data": "Emp"
    }, {
        "data": "Name"
    }, {
        "data": "Role"
    }, {
        "data": "Notes"
    }]
}).columnFilter({
    sPlaceHolder : "head:before",
    aoColumns : [{
        type : "text"
    }, {
        type : "text"
    }, {
        type : "select",
        values : arrayRoles
    }]
});
0
Bob Tate 30 Авг 2014 в 22:58
Спасибо. Работает ли это с DataTables версии 1.10? Похоже, ваш синтаксис 1.9
 – 
steveareeno
30 Авг 2014 в 23:19
Да, работает с последней версией. Datatable — это 1.10.2, который является ссылкой в ​​jsFiddle. 1.10 имеет как старую структуру (объекты), так и более новые структуры (API) (маленькое "d" против БОЛЬШОГО "D")
 – 
Bob Tate
30 Авг 2014 в 23:21
Вот пример URL-адреса с использованием версии API на их сайте datatables.net/examples/api/multi_filter. html, который также может помочь
 – 
Bob Tate
30 Авг 2014 в 23:30
Что странно, я даже не могу заставить поиск по столбцу работать в одном столбце: $('#btnSearch').click(function () { oTable.columns(1).search($('#txtSearch').val ()).рисовать(); })
 – 
steveareeno
31 Авг 2014 в 00:12