volosoft / jtable Goto Github PK

I've implemented my own "Realtime"-like jtable using websockets (and python).

It's working pretty nice except for updates while a modal dialog is opened.
If I choose to delete an entry in the first browser, and update another entry from another browser while the dialog still is opened, I get an exception when I confirm the first dialog.

Example:
Browser 1: Delete entry 1
Browser 1: Confirm delete dialog
Works like a charm.

Browser 1: Delete entry 1
Browser 2: Update entry 2
Browser 1: Confirm delete dialog
Exception!

I'm using Chrome and the exception is at row 2105 where $row.data('record') returns undefined.
This is my JS code:

ws.onmessage = function(e) {
obj = $.parseJSON(e.data);
if(obj.event == 'create') {
$('#TheContainer').jtable('addRecord', { record : obj.record, clientOnly : true });
} else if (obj.event == 'update') {
$('#TheContainer').jtable('updateRecord', { record : obj.record, clientOnly : true });
[....]

Please add a simple search function which can pass WHERE params to the SQL query.

Thanks!

Hi, Halil.

I would like to suggest an improvement.
Add a space character before the 'DESC' token to prevent defaultsorting containing 'DESC' in field name (DESCRIPTION, for example) ever sorting decreasingly:

...
//Default sorting?
if (self.options.defaultSorting.indexOf(fieldName) > -1) {
if (self.options.defaultSorting.indexOf(' DESC') > -1) {
...

Hugs,
Alexandre Möller.

Merhaba,
ben subgridde new record ettiğim zaman yeni eklenen satır boş gösteriyor, ancak ana gridde sorun yox, sayfayı yeniledikten sonra eklenen data gözüküyor. Bu sorun neyle ilgili ola bilir? Lütfen yardımcı ola bilirmisiniz?

Hi,

I just explored latest jTable plugin in my first web app using ASP.NET MVC4.

Then I found an error at line 3102: var $label = $('' + (field.title || columnName) + '').

Tag LABEL isn't closed correctly. The demo is working very well but for my application, it failed.

Regards,
Tuyen.VuDuc

A good feature would be to have an INLINE editing of record, maybe implementing a property to choose between form and inline editing.

Congratulations for this good work.
I start on its technologies (json, jquery) and I can not feed JTable, Have you example with ASP. net and VB?
thank you very much

Hi, i read in documentation that column visibility can be:
fixed: This column is always visible and can not be hided by the user
visible: This column is visible as default but can be hided by the user
hidden: This column is hidden as default but can be showed by the user

sometimes I need to have an hidden column that must remain hidden, but if i set columnSelectable to true, and i right click on header i can see and choose to show every column.
I think it would be nice to have a visibility attribute such as "ghost" or "unvisible" used to keep a column always unvisible.
Thank you

I'm trying to have add record form with tabs as the form is too long for it to be displayed in a single page.. Is there a way to achieve this. Check attached image

Hello...

First, I wanted to say that your project is wonderful and I'm using very ... Great Job !!!

Second, I want you to help me a question: how can I enjoy filling out a control of type combo (which I am using as a filter) with the same combo that is in JTable. I have a combo of Customer and I also have this same combo in Jtable (to insert / change Customer's data).

I wanted to go only 1 time to seek Server Customer information and take advantage and fill the 2 combos.

I´m using ASP.NET MVC 4.

Can you help me?

Thank you in advance ...

Assalamu Alaikum...

PS: I speak Portuguese (Brazil) and used Google Translator to help me in this text. I'm sorry if a word does not make much sense.

Hi, congratulates for this plugin for first.

Then, I've a problem in the updateAction.
Server side, I have the record but without the id..is it normal ?

I need to receive id number of the line in the update.

here one part of my code :

$('#DIV_MouvementsContainer').jtable({
title: 'Mouvements financiers',
actions: {
listAction: '/Accueil.aspx/MouvementList',
createAction: '/Accueil.aspx/CreateMouvement',
updateAction: '/Accueil.aspx/UpdateMouvement',
deleteAction: '/Accueil.aspx/DeleteMouvement'
},
fields: {

                Id: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                Montant: {
                    title: 'Montant',
                    width: '20%'
                },
                Type: {
                    title: 'Type',
                    width: '40%'
                },
                Libelle: {
                    title: 'Libelle',
                    width: '20%'
                },
                Date: {
                    title: 'Record date',
                    width: '30%',
                    type: 'date'
                }
            }
        });

in the aspx page and

[WebMethod(EnableSession = true)]
public static object UpdateMouvement(Mouvement record)
{
try
{
string msg = record.Update();
if (msg == "")
return new { Result = "OK" };
else
return new { Result = "ERROR", Message = msg };
}
catch (Exception ex)
{
return new { Result = "ERROR", Message = ex.Message };
}
}

code behind page.

I get the record but without the id that i have to do for update.

Thanks

I am wondering one thing.

Has jTable support for uploading files in edit mode? I suppose you need a mutipart form. Has someone experience with uploads in combination with jTable?

Create a metro style theme.

i use codeigniter for my a cuerren project.. i wanted use this plusgin but codeigniter don't support the GET query string as default format.. it will support but i have to do huge change for that because project already half way done... so can anyone help to do pagination with not submitting the limit in get query for the jtable plugin?

If we have a jtable student and having a child jtable library membership and having again a grand child table of library card then , if library membership child get closed without even closing the grand child model dialog then you can never close the model dialog (edit or create ) of grand child , it gets locked.

Ex jtable structure.

Student
-> library memberships
-> library cards

How can i upload file with jtable?

Can achieve this useful Module？

Create styles using less.

jquery.jtable.js(1.7.2) line 1024 col 197, function name is : _createRadioButtonListForField

code is:
_createRadioButtonListForField: function (field, fieldName, value) {
......
$.each(options, function (propName, propValue) {
......
var $radioButton = $('<input type="radio" id="Edit-' + fieldName + (radioButtonIndex++) + '" class="' + field.inputClass + '" name="' + fieldName + '" value="' + propName + '"' + (propName == value ? ' checked="true"' : '') + ' />').appendTo($radioButtonDiv);
......
}
...
}
this code :
propName == value
typeof(propName) always string, bug value's type maybe bool , int , or other type

i suggestion fix it:
propName == value ---> propName == (value + '')

jtable is a your great work! Thanks

How can I read a variable from the child table when it is closed?

when loaded data, I need select some rows default, i'm find the function _selectRows already come true,but private , why not public?

At Line 1003 in _createDropDownListForField (version 1.7.2) the following line

var $select = $('<select class="' + field.inputClass + '" id="Edit-' + fieldName + '" name=' + fieldName + '></select>').appendTo($containerDiv); 

is missing quoting around the "name" attribute's value, so when the name contains spaces, the select tag gets an incomplete name and parts of the name after the initial space get asserted as additional attributes. The following is the same line with the name attribute quoted which resolves this issue.

var $select = $('').appendTo($containerDiv);

Thanks for your response.
Yes, my code is correct but the value i got in jtable is not date format.
for example: my date value is 12/12/2012. in jtable get 2022. how i resolve this problem?
below is my code:

Hi, great job. I think many tables doesn't have a primary key composed only by a single column. Maybe it would be nice to define multiple columns with attribute Key and use them to the update and delete methods.
Sometimes columns in database are computed after insert or update, by triggers or automatic or default values. I think insert and update method have to return not only success but also the array of values to overwrite from jtable, otherwise I always need to call a reload method
Thank you

Great plugin!

Would you be able to implement an option to have a group of check boxes in an edit form? At the moment none of the edit controls have the functionality to allow the selection of multiple choices.

Cheers

Ivan

Fieldoption date/displayformat only support jQuery Datepicker format but it would be able to see hours, minutes & seconds in jTable.

I think there's a bug computing the column width, but maybe I'm doing a mistake. I show an example:

fields: {

pk: {
    visibility: 'hidden',
    key: true,
    create: false,
    edit: false,
    list: false,
    sorting: false,
    title: ''
    }
Payment: {
    inputClass: 'validate[required,maxSize[100]]',
    title: 'Payment'
},
ExpiryOccurrencies: {
    display: function (data) {
    return '<span style="display: block; text-align: right;">' + data.record.NumScad.formatNumber(0,'','') + '</span>';
    },
    inputClass: 'validate[required,custom[integer]]',
    width: '50px',
    title: 'ExpiryOccurrencies'
},
FirstExpiry: {
    display: function (data) {
    return '<span style="display: block; text-align: right;">' + data.record.PrimaScadenza.formatNumber(0,'','') + '</span>';
    },
    inputClass: 'validate[required,custom[integer]]',
    width: '50px',
    title: 'FirstExpiry'
},
Flow: {
    display: function (data) {
        return '<span style="display: block; text-align: right;">' + data.record.Passo.formatNumber(0,'','') + '</span>';
        },
    inputClass: 'validate[required,custom[integer]]',
    width: '50px',
    title: 'Flow'
},
FixedDay: {
    display: function (data) {
        return '<span style="display: block; text-align: right;">' + data.record.GiornoFisso.formatNumber(0,'','') + '</span>';
        },
    inputClass: 'validate[required,custom[integer]]',
    width: '50px',
    title: 'FixedDay'
}

}

I expected that ExpiryOccurrencies,FirstExpiry,Flow,FixedDay would be created with 50px of width, pk column is not listed so no width is required, and the remaining space would be filled by column Payment.

But what I get is (extracted with firebug):

<thead>
<tr>
<th class="jtable-column-header" style="width: 9.98818%;">
<th class="jtable-column-header" style="width: 19.904%;">
<th class="jtable-column-header" style="width: 26.9247%;">
<th class="jtable-column-header" style="width: 19.904%;">
<th class="jtable-column-header" style="width: 21.2792%;">
<th class="jtable-command-column-header" style="width:1%"></th>
<th class="jtable-command-column-header" style="width:1%"></th>
</tr>
</thead>

It seems that all columns are always exposed in percent, even though i asked to expose someone of them in pixels.
My need is to have columns setted with a fixed width and others that have to fill the remaining space. How can I configure that?

Thank you for your help.
Have a great 2013

in PHP: WORK
$result = mysql_query("SELECT COUNT(*) AS RecordCount FROM setor;");
$row = mysql_fetch_array($result);
$recordCount = $row['RecordCount'];

    //Get records from database
    //$result = mysql_query("SELECT * FROM setor ORDER BY " . $_GET["jtSorting"] . " LIMIT " . $_GET["jtStartIndex"] . "," . $_GET["jtPageSize"] . ";");        
    $result = mysql_query("SELECT * FROM setor WHERE descricao like '%" . $_POST["descfilter"] ."%' and sigla like '%" . $_POST["siglafilter"] ."%' ORDER BY " . $_GET["jtSorting"] . " LIMIT " . $_GET["jtStartIndex"] . "," . $_GET["jtPageSize"] . ";");

    //Add all records to an array
    $rows = array();
    while($row = mysql_fetch_array($result))
    {
        $rows[] = $row;
    }

    //Return result to jTable
    $jTableResult = array();
    $jTableResult['Result'] = "OK";
    $jTableResult['TotalRecordCount'] = $recordCount;
    $jTableResult['Records'] = $rows;
    print json_encode($jTableResult);

in ASP.NET (using VB.NET) DONT WORK.

Dim Conn As MySqlConnection

        Conn = New MySqlConnection(funcoesGenericas.StringConexao())

        Dim daMySQL As MySqlDataAdapter
        Dim dsMySQL As DataSet
        Dim strSQL As String

        strSQL = "SELECT * FROM setor"
        daMySQL = New MySqlDataAdapter(strSQL, Conn)
        dsMySQL = New DataSet
        daMySQL.Fill(dsMySQL, "setor")

        Dim jTableResult(3)
        jTableResult(0) = "OK"
        jTableResult(1) = 4
        jTableResult(2) = dsMySQL.Tables(0).DataSet

        Dim serializer As New JavaScriptSerializer()
        Dim arrayJson As String = serializer.Serialize(jTableResult)
        Response.Write(arrayJson)

Why?

Hi hikalkan. I wanted to say thank you for your excellent plugin.
I'd like to collaborate adding support for multiple column ordering. Changes were uploaded to my fork (https://github.com/gbisheimer/jtable).

User can include multiple sorting criteria on startup as:
defaultSorting = 'name ASC, date DESC';

During runtime ctrl + left click on column header to add multiple ordering criteria.

Hope you can include it on the next version of jTable.

What kind of customization does jtable support out of the box without special development? For example, can I easily hide the "Add new record" or "edit record" buttons? (I'm using this awesome library for view only)

HI, your table is very nice after i have try, I really love it. :)
Is it possible to make countdown timer that load datetime from database and make it show in each row?

Hi, it would be nice to have the ability to choose if edit and delete buttons must appear as first or as last columns.
thanks

hi everyone i have tried this plugin. i need to input a group checkbox as array to submit in page. Its working on submitting. and backend updates work perfectly. but when update complete if i try to edit again then then its don't update data.record variable on that plugin . here is the sample code can anyone help ?

here access and modify is the html array input which work on submit...

$(document).ready(function () {
var access_list = new Array();
var value_list = new Array();

                                                         access_list.push('<?php echo $class; ?>');
                                                         value_list.push('<?php echo $show; ?>');

                                                             //Prepare jTable
$('#main_content').jtable({
    title: 'User Group List',
    actions: {
        listAction:   'muurl',
        createAction: 'muurl',
        updateAction:  'muurl',
        deleteAction: 'muurl',
    },
    fields: {
        id: {
            key: true,
            create: false,
            edit: false,
            list: false
        },
        groupName: {
            title: 'Group Name',
            width: '40%'
        },
        access: {
            title: 'Access Permission',
            width: '12%',
            //                                                 list: false,
            input: function (data) {
                var str ='';

                if (data.record) {
                    for(var i=0;i<access_list.length;i++){
                        if(jQuery.inArray(access_list[i], data.record.access)!= -1){
                            str += '<input type="checkbox" name="access[]" value="'+access_list[i]+'" checked="checked" />'+value_list[i]+'<br/>';
                        }else{
                            str += '<input type="checkbox" name="access[]" value="'+access_list[i]+'" />'+value_list[i]+'<br/>'; 
                        } 
                    }
                } else {
                    for(var i=0;i<access_list.length;i++){
                        str += '<input type="checkbox" name="access[]" value="'+access_list[i]+'" />'+value_list[i]+'<br/>'; 

                    }
                }
                return str;    
            }

        },
        modify: {
            title: 'Modify Permission',
            width: '12%',
            //                                                 list: false,
            input: function (data) {
                var str ='';

                if (data.record) {
                    for(var i=0;i<access_list.length;i++){
                        if(jQuery.inArray(access_list[i], data.record.access)!= -1){
                            str += '<input type="checkbox" name="modify[]" value="'+access_list[i]+'" checked="checked" />'+value_list[i]+'<br/>';
                        }else{
                            str += '<input type="checkbox" name="modify[]" value="'+access_list[i]+'" />'+value_list[i]+'<br/>'; 
                        } 
                    }
                } else {
                    for(var i=0;i<access_list.length;i++){
                        str += '<input type="checkbox" name="modify[]" value="'+access_list[i]+'" />'+value_list[i]+'<br/>'; 

                    }
                }
                return str;    

            }

        }
    }
});


//Load person list from server
$('#main_content').jtable('load');

});


Hi when i am trying to fill list from the database by providing URL, it doesn't work

fields: {
                    PersonId: {
                        key: true,
                        create: false,
                        edit: false,
                        list: false
                    },
                    Name: {
                        title: 'Author Name',
                        width: '40%'
                    },
                    Age: {
                        title: 'Age',
                        width: '20%'
                    },
                    Location: {
                        title: 'Location',
                        width: '20%',
                        options :  'PersonActions.php?action=citylist'  //dynamic from database
                    },
                    RecordDate: {
                        title: 'Record date',
                        width: '30%',
                        type: 'date',
                        create: false,
                        edit: false
                    }

Code at PHP

else if($_GET["action"] == "citylist")
        {
            //Insert record into database
            $result = mysql_query("SELECT distinct(Location) from people");
            $row = mysql_fetch_array($result);

            //Return result to jTable
            $jTableResult = array();
            $jTableResult['Result'] = "OK";
            $jTableResult['options'] = $row;
            print json_encode($jTableResult);
    }

it doesn't work shows nothing in the table, can you please check if i am not using the right way ? or this a BUG!!!

hello
i tried to use jtable with jsp i followed the same steps done in the php example but id didn't work
in the jsp page which holds the table i inserted

.............
title:'Table of people',
actions: { listAction:'PersonActions.jsp?action=list'>.......
</script>

and the json object in the PersonActions.jsp is generated using the JSONObject class properly and i send it bank using :

System.out.print(jsonobject)
System.out.flush()
but it didn't work i don't know where the problem is probably it's from receiving the JSONObject from PersonActions.jsp
please help me and give me your advice

I have a Filed Like This that gets the name of cities.

...
CityID: {
title: 'city',
width: '12%',
options: '/TestPage.aspx/GetCityOptions'
}, ....

but the server side function gets a parameter like this

[WebMethod(EnableSession = true)]
public static object GetCityOptions(int id)
{
return DemoMethods.GetCityOptions(id);
}

how can I send the parameter to this server side function?

Basicly what I would like to see as a feature is the possibility to add multiple form elements for a single value.

Imagine the following "issue":

You have 1 form where you can fill in a value for a product so basicly you say that x product is €5,00 now it would be cool if we had the option to add a radio-button to the form field and if you click one of the radio buttons the value in the textbox would change to a specific value lets say €10,00.

I know it sounds kind of lazy and weird but this is just a basic example having this possibility not only with radio buttons but with more stuff would be awesome.

I cant set the width correct...

it will everytime ignore my settings.

Dear Sir,
Can you help me on Jtable.
filter by date how i write in javascript to get date value

$('#PeopleTableContainer').jtable('load', {
serial_all: $('#serial_all').val(),
datepicker1:$('#datepicker1').val(), // i write like this to get date value
datepicker2:$('#datepicker2').val()
});

can you share also script add upload photo in this table?

Thank you for making a great jquery plugin. I have been using it to add several child tables to my main jtable div, but I am struggling to add a child table to an existing child table (a grandchild table per se). What is the best way to do this? I could not find an example or documentation for doing this. Thank you for your help!

Maybe it would be interesting to have an integrated way to format numbers and currencies. At the moment, if i'm not wrong, you have provided a displayformat only for dates, so to display formatted numbers i have to use an external script, and I have to implement the display property of each column.

Thanks a lot

I Create a "input" for showing user image like this

input:function (data) {
data.value = data.record.PersonImage;
if (data.record.PersonImage) {
return '';
} else {
return ' ';
}}

}

but how can I Get Previous data of this part?

Hi, is there a way to hide or show some column by condition?
I have a search form. If user fills in specific text box and clicks submit I need to show additional column. If then he clears that text box and clicks submit again I need to hide the column.
I have tried to dynamically set "list" property to 'true' or 'false' - it remembers the first time setting and does not change after.
Thank you for reply

Hello,

How can I get Key editable in jtable ?

The configuration on my field is :
fields: {
id: {
title: 'Ressource',
key: true,
create: true,
edit: true,
list: true
},

Thanks

Hi, i am using php with jtables. I have 2 fields. Company, Branches. When i select one company from the dropdown, i just want to show only the selected company branches.

How can i do so.

This is how i get all the values from database:
Companyid: {
title: 'Company Name',
width: '90px',
inputClass: 'validate[required]',
options: {'': 'Select Company',$value){ list($cid,$cname) = explode(',',$value); echo "'".$cid."': '".strip_tags($cname)."', "; } ?>
},
},
Branch: {
title: 'Branch Name',
width: '90px',
inputClass: 'validate[required]',
options: {'': 'Select Branch',$value){ list($bid,$bcid,$bname) = explode(',',$value); echo "'".$bid."': '".strip_tags($bname)."', "; } ?>
}

can there be options to split the edit box into 2 or even 3 columns for complex data sets?

i find that i need to scroll and its not very user friendly. if this is possible with some css, can you point me in the right direction?

I think added a combobox append bottom grid and callback page size

I try to update data as Uni code through jtable; however ??? was recorded in table. Hence how to solve this problem. Please help on this.

Thanks in advance.