initialization code when using both editables and column filters

[GoogleCodeExporter]

I have your existing makeEditable plugin. How do I use the colummn filter with 
it? I can see the column names below but they are not enabled (just text).

Thanks.

Original issue reported on code.google.com by yfn...@gmail.com on 11 Jun 2011 at 8:23

[GoogleCodeExporter]

Hi,

These plugins are independent so you can apply boh of them on he same able. 
Something like a:

$("#example").makeEditable().columnFilter();

Original comment by joc...@gmail.com on 11 Jun 2011 at 11:44

• Changed state: Started
• Added labels: Priority-Low, Type-Other
• Removed labels: Priority-Medium, Type-Defect

[GoogleCodeExporter]

Hi, I followed your example but it still didn't show up. Here's my init:

        <script type="text/javascript" charset="utf-8">

$(document).ready(function() {
                $.datepicker.regional[""].dateFormat = 'dd/mm/yy';
                $.datepicker.setDefaults($.datepicker.regional['']);

    var oTable = $('#example').dataTable( {
        "bJQueryUI": false,
        "bSortClasses": false,
        "sPaginationType": "full_numbers",
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "server_processing.php",
        "sScrollY": 440,
        "bScrollCollapse": true,
            "aoColumns": [
            /*id*/      { "bVisible": false},
            /*taskid*/ {},  // TaskID 
            /*state*/   { indicator: 'Saving State...',
            tooltip: 'Click to select State',
            loadtext: 'loading...',
            type: 'select',
            onblur: 'cancel',
            submit: 'Ok',
            loadurl: 'State.php',
            loadtype: 'GET' },
            /*owner*/{   indicator: 'Saving Owner...',
            tooltip: 'Click to select the Owner ',
            loadtext: 'loading...',
            type: 'select',
            onblur: 'cancel',
            submit: 'Ok',
            loadurl: 'Owner.php',
            loadtype: 'GET' },
           /*category*/{   indicator: 'Saving category...',
            tooltip: 'Click to select the category ',
            loadtext: 'loading...',
            type: 'select',
            onblur: 'cancel',
            submit: 'Ok',
            loadurl: 'Category.php',
            loadtype: 'GET' },
       /*task*/{   indicator: 'Saving task...',
                type      : "autogrow",
            tooltip: 'Click to edit your task',
    cancel    : 'Cancel',
    onblur    : "ignore",
    autogrow : {
        lineHeight : 16,
        maxHeight  : 512
    }, 
            submit: 'Ok'},
            /*ts*/ null // 
            ],

 }).makeEditable({ 
                    sUpdateURL: 'UpdateData.php',
                    sAddURL: "AddData.php",
                    // sDeleteURL: "NoDeleteData.php",
                    sDeleteURL: "DeleteData.php",
                    fnStartProcessingMode: function () {
                        $("#processing_message").dialog();
                    },

                    fnEndProcessingMode: function () {
                        $("#processing_message").dialog("close");
                    },
                        fnOnEdited: function(status)
                {   
                    $("#trace").append("Edit action finished. Status - " + status);
                },
                        "aoColumns":[
            /*taskid*/ null,  // TaskID 
            /*state*/   { indicator: 'Saving State...',
            tooltip: 'Click to select State',
            loadtext: 'loading...',
            type: 'select',
            onblur: 'cancel',
            submit: 'Ok',
            loadurl: 'State.php',
            loadtype: 'GET' },
            /*owner*/{   indicator: 'Saving Owner...',
            tooltip: 'Click to select the Owner ',
            loadtext: 'loading...',
            type: 'select',
            onblur: 'cancel',
            submit: 'Ok',
            loadurl: 'Owner.php',
            loadtype: 'GET' },
            /*category*/{   indicator: 'Saving category...',
            tooltip: 'Click to select the category ',
            loadtext: 'loading...',
            type: 'select',
            onblur: 'cancel',
            submit: 'Ok',
            loadurl: 'Category.php',
            loadtype: 'GET' },
            /*task*/{   indicator: 'Saving task...',
                type      : "autogrow",
            tooltip: 'Click to edit thy task',
    cancel    : 'Cancel',
    onblur    : "ignore",
    autogrow : {
        lineHeight : 16,
        maxHeight  : 512
    }, 
            submit: 'Ok'},
            /*ts*/ null // 
                    ],
                        } )
 .columnFilter({ 
            aoColumns: [ 
                    { type: "number" },
                    { type: "select", values: [ 'Active', 'Today', 'Inactive', 'Completed', 'Delete']  },
                    { type: "text" },
                   /*category*/ { type: "text" },
                   /*cahnge to date*/ { type: "number" }
                ]

        }) ;
                    } );   // doc ready

        </script>
    </head>

Original comment by yfn...@gmail.com on 12 Jun 2011 at 3:35

[GoogleCodeExporter]

Not sure if it matters, but my source is from mysql. Here's the rest of the 
code.

Thanks

Original comment by yfn...@gmail.com on 12 Jun 2011 at 3:41

Attachments:

• ede11.php

[GoogleCodeExporter]

Hi,

I cannot see anything odd in the setup maybe you can try with less options, 
make it work with minimal options and then add new setting. First try to setup 
dataTable without these plugins and then if it works add them. Your PHP code 
should not affect plugin because if you generate a valid table (and it seems to 
me that it is valid) plugin shoudl work. 

I have added one simple minimal example on the 
http://jquery-datatables-editable.googlecode.com/svn/trunk/columnFilter.html 
You might start from this example and add your settings.

Regards,
Jovan

Original comment by joc...@gmail.com on 12 Jun 2011 at 9:44

[GoogleCodeExporter]

Jovan, thanks. I tried reducing to the simplest, still no joy. Your html 
example worked but my situation is I need server-side. The problem I suspect is 
the server-source trickery needed by makeEditable with aoColumns i.e. 
        $('#example').dataTable({
has this aoColumns def:
            "aoColumns": [
            /*id*/      { "bVisible": false},
            /*taskid*/ {},  // TaskID 

and $('#example').dataTable().makeEditable({
                        "aoColumns":[
            /*taskid*/ null,  // TaskID 

(no id definition).

Could it be that columnfilter is confused by the difference?

BTW, have/can you tried/try running server-side (MySQL) makeEditable with 
columnfilter?

Thanks

Original comment by yfn...@gmail.com on 12 Jun 2011 at 5:30

[GoogleCodeExporter]

Hi,

It works with server-side processing. I have tried is with C# code but no 
matter it should work the same way with the MySQL. I have attached HTML page 
that is used and there is referenced server side page that provides results.
Without some online example I can just guess what is wrong:
1. Maybe there is some JavaScript error reported in the error console
2. Have you placed correct THEAD and TFOOT elements? In the atached file you 
can see how it is configured when list of companies are shown.

Regards,
Jovan

Original comment by joc...@gmail.com on 12 Jun 2011 at 8:26

Attachments:

• CRUDColumnFilter.htm

[GoogleCodeExporter]

Jovan, thanks for your patience. There were no js errors (on firebug) although 
there's a bunch of css errors. The thead/tfoot sequence are correct, although 
mine comes from the db ie,:

<tfoot>
<tr>
<?php 
$Count = 0;
Do {
print('<TH id='.$arr1[$Count].'>'.$arr1[$Count].'</TH>');
$Count++;
} while ( $Count < $Numfields);
?>
</tr>

but that shouldn't matter.

I think the problem was my version of makeEditables; previously, I'd used the 
version in the zip; but after downloading the newest from the trunk and 
changing the html markup, I can get the search boxes to show! 

However, the search is wrong i.e. nothing matches, except the 1st line in the 
1st column.  The other lines/columns don't work. Which version of makeEditables 
should I be using?

Original comment by yfn...@gmail.com on 12 Jun 2011 at 10:57

Attachments:

• ede2.php

[GoogleCodeExporter]

Jovan, I noticed in firebug that the Get is being run when I run the column 
filters i.e. server_processing.php (attached). Does this need to be modified?

Original comment by yfn...@gmail.com on 13 Jun 2011 at 1:51

Attachments:

• server_processing.php
• create_sql_junk1.php

[GoogleCodeExporter]

Hi,

Could you first try to use only data tables with column filter (without make 
editable add-in) so you can make sure that it works. I see few problems in your 
code:
1. When you use server side processing mode you should not generate anything in 
the TBODY because it will be populated via ajax call. See page source of the 
http://www.datatables.net/examples/data_sources/server_side.html that is 
initially returned.
2. What parameter are you using for filtering on the server side? Without 
column filter you should use sSearch parameter but with individual column 
filtering you should use separate search keywords for each column (names of the 
parameters are sSearch_0, sSearch_1 etc - you can find it in the Firebug on in 
DataTables documentation.
3. Each time you change the search criterion in any column (e.g. type any 
letter in any text box or select new value in dropdown) new search request will 
be sent to the server because server need to return data that matches new 
search condition. This is standard behavior of the DataTables see 
http://www.datatables.net/examples/data_sources/server_side.html and try to 
type in something in the main search.

You can use the latest version of make editable from the site (the one that is 
used in the 
http://jquery-datatables-editable.googlecode.com/svn/trunk/columnFilter.html

Regards,
Jovan

Original comment by joc...@gmail.com on 13 Jun 2011 at 11:20

[GoogleCodeExporter]

Jovan, I found the problem; it was related to the aoColumn column ids mix up 
after all (my server side script is from the same example you mentioned):

When I type a search term (555) for the 1st column, here's the parameter list 
from firebug:

sSearch 
sSearch_0   555
sSearch_1   
sSearch_2   
sSearch_3   
sSearch_4   
sSearch_5   
sSearch_6   
sSortDir_0  asc

 it should be sSearch_1 that has the value, not s_search_0? since the latter is the "fake"/invisible coluumn for hidden, db id value. SO the columns are shifted by one i.e. typing in column 6 inputs i to sSearch_5 (searches in column 5.

I kludged a fix by shifting the columns id up. You'll probably have a more 
elegant approach. 

Thanks, I'll buy you a beer for your enthusiastic help (donation forthcoming). 
Francis

Original comment by yfn...@gmail.com on 13 Jun 2011 at 3:50

[GoogleCodeExporter]

Hi,

In my code I'm using dataTables fnFilter function that accepts index of the 
column and when 0 is used for the first column it works fine in client-side 
processing mode. As index s used index of visible column. I'm not sure is this 
ok or not because it depends on the interpretation on the server side but 
current logic is that sSearch_N represents search criterion of the N-th visible 
column. 

Regards,
Jovan

Original comment by joc...@gmail.com on 13 Jun 2011 at 8:07

[GoogleCodeExporter]

I'll leave things as is, until it's broken :)
Might have to test that sooner than later (see next bug report).

Original comment by yfn...@gmail.com on 14 Jun 2011 at 2:30

[GoogleCodeExporter]

Original comment by joc...@gmail.com on 14 Jun 2011 at 7:44

• Changed state: Done