jQWidgets Forums

Tagged: datatable filtering, jqwidgets datatable filtering

This topic contains 4 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 3 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

How to re-order the search field Posts

March 3, 2014 at 5:45 pm How to re-order the search field #50417

dqninh09@gmail.com

Participant

Hi,

I can turn on the filter for a database by setting the filterable: to true, which is cool.

filterable: true,

When the filterable is set to true, the search box is displayed on top of the data table header with a drop-down list box of the searchable field names. For example, the example in the jqwidgets site has the following sample with the list of 5 fields: Supplier Name, Name, Quantity, Price, and City.

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/index.htm#demos/jqxdatatable/javascript-datatable-filtering.htm

The Example when running

Is there a way to change the order of the search fields, rename the field, or remove some of them?

Thanks.

March 3, 2014 at 9:41 pm How to re-order the search field #50427

Peter Stoev

Keymaster

Hi dqninh09,

The names of the fields are specified by you when you create the DataTable columns and you set the “text” property of each column. It is not possible to dynamically rename or reorder. If you want to disable the filtering for a specific column, then you need to set the “filterable” property of the column to false.

Ex:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>JavaScript DataTable Filtering</title>
    <meta name="description" content="Filtering allows you to display a subset of the records in the data source that meet a particular criteria. When filtering is applied to a DataTable, displayed records are restricted to those that meet the current filter criteria. 
        You can filter data against single or multiple columns. End-users can apply filtering by selecting a column's value from the filter dropdown, typing a filter value into the search field and clicking the search button.">
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            
            // prepare the data
            var source =
            {
                dataType: "xml",
                dataFields: [
                     { name: 'SupplierName', type: 'string' },
                     { name: 'Quantity', type: 'number' },
                     { name: 'OrderDate', type: 'date' },
                     { name: 'OrderAddress', type: 'string' },
                     { name: 'Freight', type: 'number' },
                     { name: 'Price', type: 'number' },
                     { name: 'City', type: 'string' },
                     { name: 'ProductName', type: 'string' },
                     { name: 'Address', type: 'string' }
                ], 
                url: '../sampledata/orderdetailsextended.xml',
                root: 'DATA',
                record: 'ROW'
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function () {
                    // data is loaded.
                }
            });
            // create jqxDataTable.
            $("#table").jqxDataTable(
            {
                source: dataAdapter,
                pageable: true,
                altRows: true,
                filterable: true,
                width: 660,
                columns: [
                  { text: 'Supplier Name', filterable: false, cellsAlign: 'center', align: 'center', dataField: 'SupplierName', width: 200 },
                  { text: 'Name', cellsAlign: 'center', align: 'center', dataField: 'ProductName', width: 200 },
                  { text: 'Quantity', dataField: 'Quantity', cellsformat: 'd', cellsAlign: 'center', align: 'center', width: 80 },
                  { text: 'Price', dataField: 'Price', cellsformat: 'c2', align: 'center', cellsAlign: 'center', width: 70 },
                  { text: 'City', cellsAlign: 'center', align: 'center', dataField: 'City' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="table">
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

March 6, 2014 at 6:56 pm How to re-order the search field #50626

dqninh09@gmail.com

Participant

Filtering is nice. I don’t want to disable filtering.

When there is a will, will be there a way.