javascript - jq datatable 表中给每一列添加下拉框搜索不起作用

问题描述

问 题

按照datatable中文网的列子中给每一列添加下拉框搜索，但是页面上没有显示出来。

数据我是根据中文网给的方法来获取的如图：

解决方案

var handleContentDatatable = function (dataTable, columns, urlList) {

    var tableClient = dataTable.DataTable({
        "iDisplayLength": 10,
        "bFilter": false,
        "bInfo": true,
        "bSort": false,
        "bStateSave": true,
        "autoWidth": false,
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "oLanguage": dataTablesLanguage,
        "bServerSide": true,
        "bProcessing": true,
        "bDestroy": true,
        "sAjaxSource": urlList.queryUrl,
        "aoColumns": columns,
        "fnServerData": function (sSource, aoData, fnCallback) {
            $.ajax({
                "dataType": 'json',
                "type": "POST",
                "url": sSource,
                "data": aoData,
                "success": function (data) {
                    fnCallback(data);
                    $('#selectAll').prop("checked", false);

                },
                "timeout": 30000
            });
        },
        "fnServerParams": function (aoData) {
            var searchText = $("#searchText").val();
            var filterFromToDate = $('#filterFromToDate span').html();
            var contentType = $("#content_type").val();
            var ownerUserId = $("#owner_user_id").val();
            aoData.push({"name": "searchText", "value": searchText}, {
                "name": "filterFromToDate",
                "value": filterFromToDate
            }, {
                "name": "contentType",
                "value": contentType
            }, {
                "name": "ownerUserId",
                "value": ownerUserId
            });
        },
        "columnDefs": [
            {
                "defaultContent": '',
                "targets": ['_all']
            },
            {
                'orderable': false,
                "targets": ['_all']
            },
            {
                "targets": [0],
                "render": function (data, type, row, meta) {
                    return "<input type='checkbox' id='" + row.id + "' value='" + row.id + "' /><input type='hidden' class='body_type' id='body_type" + row.id + "' value='right'>";
                }
            },
        ],
        "createdRow": function (row, data, index) {
        },
    });
    }

这篇关于javascript - jq datatable 表中给每一列添加下拉框搜索不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！