Блог

 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.Но из-за большого количества столбцов в таблице.Ширина таблиц слишком велика из-за большой ширины фильтра столбцов.

 <!-- 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. Также, пожалуйста, дайте мне знать, требуются ли плагины, если таковые имеются.

Заранее спасибо

Вы можете сделать это, добавив или переопределив приведенный ниже css :

 .number_range_filter
{
  width:50px;
}