Question

function showjson() {
    $.ajax({
        url: "json/abc.json", // Path of json file
        dataType: "json", // Type of data which is being fetched
        type: "post", // Method used Post
        success: function (data) // function to check whether the json data
        // has no error
        {
            var len = data.data.length; // to find length
            var str = "";
            for (var i = 0; i < len; i++) {
                // To Display The values in Datatable
                str += "<tr align = center>" + "<td>" + "<input type=" + data.data[i].check + ">" + "</td>" + "<td>" + data.data[i].id + "</td>" + "<td>" + data.data[i].name + "</td>" + "<td>" + data.data[i].type + "</td>" + "<td>" + data.data[i].attribute + "</td>" + "<td>" + data.data[i].sku + "</td>" + "<td>" + data.data[i].price + "</td>" + "<td>" + data.data[i].quantity + "</td>" + "<td>" + data.data[i].visibility + "</td>" + "<td>" + data.data[i].status + "</td>" + "<td>" + data.data[i].websites + "</td>" + "<td>" + "<A href='newProduct.jsp'>" + data.data[i].action + "</A>" + "</td>" + "</tr>";
            }
            $(str).appendTo('#tbl');
            $("#tbl").dataTable({
                "iDisplayLength": 50,
                    "bAutoWidth": false,
                    "sDom": '<"top"l>rt<"bottom"ip><"clear">', // Disables only
                // Global Search
                /* "bFilter": false, */
                // Disables the all search Option
                "bSortCellsTop": true
            }).columnFilter({
                sPlaceHolder: "head:after",
                aoColumns: [

                type: "select",
                values: ["yes", "No", "Any"]
                },
                {
                    type: "number-range",
                    sWidth: "50px"
                },
                {
                    type: "text",
                    sWidth: "50px"

                },
                {
                    type: "select",
                    values: ["Simple", "Grouped ",
                        "Configurable", "Virtual",
                        "Bundle ", "Downloadable"]
                },
                {
                    type: "select",
                    values: ["Default", "Clothing", "CPU",
                        "Electronics", "Jewellery",
                        "Laptops"]
                },
                {
                    type: "text",
                    sWidth: "50px"
                },
                {
                    type: "number-range",
                    sWidth: "50px"
                },
                {
                    type: "number-range",
                    sWidth: "50px"
                },
                {
                    type: "select",
                    values: ["Catalog", "Search",
                        "Catalog Search"]
                },
                {
                    type: "select",
                    values: ["enabled", "disabled"]
                },
                {
                    type: "select",
                    values: ["Main Website"]
                },
                ]
            });

    },
    error: function (data) // function if the json has wrong syntax
    {
        alert("error"); // Alerts a msg
    }
    });
}

在上面的代码中，我动态地从JSON中获取值。表转换为datatable.But因为表中的列数很多。由于列过滤器的宽度很大，表格宽度太大。

<!-- DataTable Start Here -->
<div id="div3">
    <table id="tbl" class="dis" style="font-size: 12px; height: 50px;" width="100%">
        <thead>
            <tr id="t1">
                <th></th>
                <th>Id</th>
                <th>Name</th>
                <th>Type</th>
                <th>Attrib. Set Name</th>
                <th>SKU</th>
                <th>Price</th>
                <th>Qty</th>
                <th>Visibility</th>
                <th>Status</th>
                <th>Websites</th>
                <th>Action</th>
            </tr>
            <tr id="t2">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </thead>
    </table>
</div>

我的Json文件从中检索我的数据数据

{
    "data": [{
        "check": "checkbox class=case name=case",
            "id": 1,
            "name": "Alex",
            "type": "Simple Product",
            "attribute": "Laptops",
            "sku": 349,
            "price": "$125",
            "quantity": 5000,
            "visibility": "Search",
            "status": "Enabled",
            "websites": "Main Websites",
            "action": "[Edit]"
    }, {
        "check": "checkbox class=case name=case",
            "id": 2,
            "name": "Kravina",
            "type": "Grouped Product",
            "attribute": "Default",
            "sku": 125,
            "price": "$125",
            "quantity": 5656,
            "visibility": "Catalog",
            "status": "Enabled",
            "websites": "Main Websites",
            "action": "[Edit]"
    }]
}

我唯一的问题是我无法减小列过滤器搜索框的宽度。我使用过{swidth:"50px"}但它无效。请告诉我，以便我可以在datatable中更改列过滤器的宽度。如果有插件，请告诉我。

提前致谢

Answer 1

您可以通过在css：

下添加或覆盖来实现此目的

.number_range_filter
{
  width:50px;
}

在Datatable中更改列过滤器文本框的宽度

1 个答案: