search

volosoft / jtable

A JQuery plugin to create AJAX based CRUD tables.
http://www.jtable.org
1.1k stars 506 forks source link

New Feature:EditInline and ToolbarSearch (Multiple) #302

Open nubuntu opened 11 years ago

nubuntu commented 11 years ago

i just get problem in few days ago about my table, in dynamic filtering and dynamic editinline so i learn from @hikalkan codes,,then write this extension to jtable, get js in my repo and hope this help just simply example

editinline jquery.jtable.editinline.js

toolbarsearch jquery.jtable.toolbarsearch.js

get script at https://github.com/nubuntu/jtable/tree/master/lib/extensions

embed script at once

script type="text/javascript" src="asset/jquery-1.9.0.min.js"> script type="text/javascript" src="..asset/jquery-ui-1.10.0.custom/js/jquery-ui-1.10.0.custom.js"> script type="text/javascript" src="asset/jtable.2.2.1/jquery.jtable.js"> script type="text/javascript" src="jtable.2.2.1/extensions/jquery.jtable.editinline.js"> script type="text/javascript" src="asset/jtable.2.2.1/extensions/jquery.jtable.toolbarsearch.js">

just type editinline:{enable:true} to enabe editinline and type toolbarsearch:true enable toolbar search

    $('#StudentTableContainer').jtable({
        title: 'The Student List',
        paging: true, //Enable paging
        pageSize: 10, //Set page size (default: 10)
        sorting: true, //Enable sorting
        defaultSorting: 'Name ASC', //Set default sorting
        editinline:{enable:true},
        toolbarsearch:true,
        actions: {

...................................................... ........................................................

and in my data table its look like below,

datepicker for type:'date' ei1

dropdown for defined option ei2

textarea for type:'textarea' ei3

fancy checkbox(click toggle) for type:'checkbox' ei4

multiple toolbar search ts1

with reset button ts2

and php to support multiple search will look like this $db = NuDB::getObj();// $db is my mysql class to simplify crud, get it in my repo if you wanna ease code $offset = isset($_REQUEST['jtStartIndex']) ? $_REQUEST['jtStartIndex']:1 ;
$rows = isset($_REQUEST['jtPageSize']) ? $_REQUEST['jtStartIndex']:10 ; $sort = isset($_REQUEST['jtSorting']) ? $_REQUEST['jtSorting']:$db->primary.' desc';

    $q = $_REQUEST['opt']; // keyword/field values
    $opt = $_REQUEST['opt']; // fieldnames
    $where ='';
    if($q):
    for($i = 0; $i < count($opt); $i++):  
        $where[] = $opt[$i]." like '".$q[$i]."%'";
    endfor;
    $where = " where ".implode(" And ",$where);  
    endif;
    $q = "select count(*) FROM sometable".$where;
    $db->setQuery($q); 
    $total= $db->loadResult();  
    $q = "SELECT * FROM sometable".$where." order by ".$sort;  
    $items = $db->getList($q,$offset,$rows);            
    $jTableResult = array();
    $jTableResult['Result'] = "OK";
    $jTableResult['Records'] = $items;
    $jTableResult['TotalRecordCount'] = $total;
    die(json_encode($jTableResult));
k6311 commented 11 years ago

can any one please provide link to download jquery.jtable.editinline.js

dineshems commented 10 years ago

can any one give me a sample in c# please?

ggcristian2014 commented 10 years ago

Hi guys,

I'm having some difficulties using the search plug-in for a jtable and I was wondering if you could give me any suggestions.

My HTML:

<?php
include 'url.php';
?>
<!doctype html>
<head>
<html lang="ro">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="<?php echo $url.'jquery/jquery-1.10.2.js';?>"></script>
<script src="<?php echo $url.'jquery/ui/jquery-ui.js';?>"></script>
<!-- Include one of jTable styles. -->
<link href="<?php echo $url.'includes/css/jtabletheme/lightcolor/gray/jtable.css';?>" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="<?php echo $url.'jquery/themes/ui-darkness/jquery-ui.css';?>">
<!-- Include jTable script file. -->
<script src="<?php echo $url.'includes/functii/jquery.jtable.min.js';?>" type="text/javascript"></script> 
<script src="<?php echo $url.'includes/functii/jquery.jtable.ro.js';?>" type="text/javascript"></script>  
<script src="<?php echo $url.'includes/functii/jtable.toolbarsearch.js';?>" type="text/javascript"></script>  
</head>
<body>
<div id="PeopleTableContainer1" style="width:98%;"></div>
<script type="text/javascript">

        $(document).ready(function () {

            //Prepare jTable
            $('#PeopleTableContainer1').jtable({
                title: 'Camioanele mele',
                paging: true,
                pageSize: 5,
                sorting: true,
                //selecting: true, //Enable selecting
                defaultSorting: 'dataplecare ASC',
                openChildAsAccordion: false,
                toolbarsearch:true,
actions: {
                    listAction: 'filtru.php?action=list',
                    createAction: 'PersonActionsPagedSorted.php?action=create',
                    updateAction: 'PersonActionsPagedSorted.php?action=update',
                    deleteAction: 'PersonActionsPagedSorted.php?action=delete'
                },
                fields: {
...
}
...
</script>
</body>
</html>

My filtru.php:

<?php
//session_start();
//$username = $_SESSION['username'];
try
{
    $con = new PDO('mysql:host=localhost;dbname=dbname', 'root', '1234');
             //Getting records (listAction)
    if ($_GET["action"] == "list") {

                $offset = isset($_GET['jtStartIndex']) ? $_GET['jtStartIndex']:1 ;  
                $rows = isset($_GET['jtPageSize']) ? $_GET['jtPageSize']:10 ;
                $q = $POST['q'];
                $sort = isset($_GET['jtSorting']) ? $_GET['jtSorting']:'dataplecare DESC';
                $opt = $_POST['opt'];
                $where ='';
                if($q):
                    if(!is_array($q)):
                    $where = " where $opt like '%$q%'";
                else:
                        for($i = 0; $i < count($opt); $i++):  
                        $where[] = $opt[$i]." like '%".$q[$i]."%'";
                        endfor;
                    $where = " where ".implode(" And ",$where);  
                    endif;
                endif;
                //Get record count
                $SQL = 'SELECT COUNT(*) AS RecordCount FROM marfa$where';
                $sth0 = $con->prepare("$SQL");
                $sth0->execute();
                $row0 = $sth0->fetch(PDO::FETCH_ASSOC);
                $recordCount = $row0['RecordCount'];
                //Get records from database
                $SQL = $con->query('SELECT COUNT(*) AS RecordCount FROM marfa$where');
                $sth0 = $con->prepare("$SQL");
                $sth0->execute();
                $row0 = $sth0->fetch(PDO::FETCH_ASSOC);
                $recordCount = $row0['RecordCount'];
                $SQL = $con->query('SELECT * FROM marfa$where ORDER BY $sort LIMIT $offset,$rows');
                $sth1 = $con->prepare("$SQL");
                $sth1->execute();
                //Add all records to an array
                $rows = array();
                while($row1 = $sth1->fetch(PDO::FETCH_ASSOC))
                {
                    $rows[] = $row1;
                }
                $rows[] = $row;
                //Return result to jTable
                $jTableResult = array();
                $jTableResult['Result'] = "OK";
                $jTableResult['TotalRecordCount'] = $recordCount;
                $jTableResult['Records'] = $rows;
                print json_encode($jTableResult);
    }
}
catch(Exception $ex)
{
    //Return error message
    $jTableResult = array();
    $jTableResult['Result'] = "ERROR";
    $jTableResult['Message'] = $ex->getMessage();
    print json_encode($jTableResult);
}
?>

The problem is that I'm always getting the message "Error communicating with the server." and the table is rendered empty.

If I'm removing the stuff related to the search bar the table shows up just fine and everything works, except of course the searching part.

Any suggestions?

BYogesh commented 10 years ago

@nubuntu Hello, How to apply a validation (like only Numeric to the cell Contacts) in editinline. Please Guide. Thanks

santhosh9 commented 10 years ago

Hello,

I was able to connect to the db and can see the table with just 4 fields like person id, age, name and record date.

Can you please explain how to add a checkbox option and dropdown options, also let me know how to hide person id field in the table.

THanks in advance.

rodago commented 10 years ago

Nice work @nubuntu!. I installed your great plugin. It all works properly. But there is one problem. Here's what happens: 1) Click on "+Add New Record" 2) I'm posting all the data in the Dialog 3) Click on "Save" 4) The dialog he replies ... "" An error occured while communicating to the server. "" 5) When I close the Dialog record is present in the recordset

I do not understand. :-( If the record is successfully inserted, because the Dialog tells me that there is an error?

Many thanks for your wonderful work and I hope you can help me.

Rodago

Dios commented 9 years ago

Im trying to use plugin with jsp, but its not working (at least for one of my proyects), it doesnt show forms.

Pag 1 captura2 Pag 2 captura1

Pag 1 working http://pastebin.com/Kwd4r7sF

Pag2 Not working http://pastebin.com/9PeA1qfu

can you help me please?

EDIT: seems like 

<script src="content/jquery.jtable.toolbarsearch.js" type="text/javascript"></script>

must be after rest javascript.

amrt06 commented 9 years ago

can any one post a search filter sample code in servlet n jsp ?As i am using jquery jtable in servlet. I am facing problem in search filter.

manasiarora commented 9 years ago

How is data sent back (posted to server) for saving. In order to add new record we still have to use a modal popup? Can some one post sample aspx code for an editable jTable with cascading dropdowns as column values.

Thanks in advance

nubuntu commented 9 years ago

Updated.. added date picker

datepicker

https://github.com/nubuntu/jtable/commit/38535e6c40adcf6b3a2732f9ffcbd366f6f0d495

Kobusdutoit commented 9 years ago

Took a while for me to fully understand the plugin but very nicely done man! Thanks a mil for the effort!

manasiarora commented 9 years ago

Hi nubuntu,

I'm using the inline editing feature. and when the ajax call is made to post data. i get an exception saying:

ExceptionType: "System.InvalidOperationException" Message: "Cannot convert object of type 'Vipassi.Entities.Timesheet.Timesheet' to type 'System.Collections.Generic.IDictionary`2[System.String,System.Object]'" StackTrace: " at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeInternal(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject) ↵ at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeMain(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject) ↵ at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize(JavaScriptSerializer serializer, String input, Type type, Int32 depthLimit) ↵ at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize[T](String input) ↵ at System.Web.Script.Services.RestHandler.GetRawParamsFromPostRequest(HttpContext context, JavaScriptSerializer serializer) ↵ at System.Web.Script.Services.RestHandler.GetRawParams(WebServiceMethodData methodData, HttpContext context) ↵ at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)"

POST http://localhost:35062/Web/Activity/Timesheet.aspx/UpdateEntry 500 (Internal Server Error)jquery-1.9.0.js:8475 sendjquery-1.9.0.js:7930 st.extend.ajaxjquery.jtable.aspnetpagemethods.js:90 $.extend._ajaxjquery.jtable.editinline.js:250 $.extend._editInline_ajaxjquery.jtable.editinline.js:233 (anonymous function)jquery-1.9.0.js:3045 st.event.dispatchjquery-1.9.0.js:2721 y.handle

Uncaught ReferenceError: error is not definedjquery.jtable.editinline.js:261 _ajax.errorjquery.jtable.aspnetpagemethods.js:79 opts.errorjquery-1.9.0.js:1026 fjquery-1.9.0.js:1138 p.fireWithjquery-1.9.0.js:8023 rjquery-1.9.0.js:8558 send.r

Please let me know what the problem could be?

I'm using ASP.Net web pages and webmethod way of invoking it NOT MVC.

Thanks in advance Manasi

prgcoder commented 9 years ago

Hi, Is there a way to leave editinline on, but make some columns uneditable?

I have tried this:

                    <script type="text/javascript">
                        $(document).ready(function () {
                            $('#AttendanceTable').jtable({
                                title: 'Attendance List - <?php echo $course_date;?>',
                                actions: {
                                    listAction:   'select',
                                    createAction: 'insert',
                                    updateAction: 'update',
                                    deleteAction: 'delete'
                                },
                                editinline: { enable: true },
                                toolbarsearch: false,
                                fields: {
                                    attend_id: {
                                        key: true,
                                        list: false
                                    },
                                    course_desc: {
                                        title: 'Course',
                                        width: '5%'
                                    },
                                    booking_name: {
                                        title: 'Booking Name',
                                        width: '8%',
                                        create: false,
                                        edit: false,
                                        setEditable: false,
                                        setEnabled: false
                                    },
                                    attendee_name: {
                                        title: 'Attendee',
                                        width: '15%'
                                    },
etc....

Sorry guys if this has been answered before - I was not able to find it. Any help is greatly appreciated.

Kind Regards, Andy.

deltoss commented 9 years ago

@prgcoder You need to modify the Nubuntu's "jquery.jtable.editinline.js" file's "_createCellForRecordField" function.

Just need to edit the if statement's conditions. Hope this code helps.

Original Code:

_createCellForRecordField: function (record, fieldName) {
    if(this.options.editinline.enable){
        return $('<td></td>')
        .addClass(this.options.fields[fieldName].listClass)
        .append((this._getDisplayTextEditInline(record, fieldName)));
    }else{
         return $('<td></td>')
        .addClass(this.options.fields[fieldName].listClass)
        .append((this._getDisplayTextForRecordField(record, fieldName)));

    }
},

Modified Code:

_createCellForRecordField: function (record, fieldName) {
    if(this.options.editinline.enable && this.options.fields[fieldName].edit != false){
        return $('<td></td>')
        .addClass(this.options.fields[fieldName].listClass)
        .append((this._getDisplayTextEditInline(record, fieldName)));
    }else{
         return $('<td></td>')
        .addClass(this.options.fields[fieldName].listClass)
        .append((this._getDisplayTextForRecordField(record, fieldName)));

    }
},
liedekef commented 9 years ago

I just tested the toolbarsearch extension, but it seems it doesn't work well with hidden columns: it shows search fields for all columns ...

NaniA commented 9 years ago

Hi nubuntu,

first all thanks to implement great plugin,i included toolbar search plugin in my jtable java code,but its not working. please help me on this.thanks in advance....

tmandys commented 9 years ago

I extended toolbarsearch plugin to support dropdowns generated from jtable options property. Would you like to get diff or shall I fork GIT repository ?

charmymy commented 9 years ago

tmandys : it seems nubuntu being offline too long, so you have to make a decision alone. nubuntu's plugin has supported static dropdowns, but not supporting dynamic options from ajax requests with dependent values of fields searched.

alex0077 commented 9 years ago

Hello,

I need help on how to use this edit inline with JTable using C# asp.net webforms. So is someone have a code sample or tutorial about hot to use it I would appreciate very much. Thank you.

manasiarora commented 9 years ago

Hi Alex,

Have done a lot of code fixing for c# . net forms. Shall mail it or upload it asap.

Thanks n regards Manasi On 5 Apr 2015 16:29, "alex0077" notifications@github.com wrote:

Hello,

I need help on how to use this edit inline with JTable using C# asp.net webforms. So is someone have a code sample or tutorial about hot to use it I would appreciate very much. Thank you.

— Reply to this email directly or view it on GitHub https://github.com/hikalkan/jtable/issues/302#issuecomment-89752625.

alex0077 commented 9 years ago

Hi Manasi,

Thank you for your fast reply. You can send the code sample to my email alexandre.a.o.a@gmail.com or if you prefer you can upload it too. Many thanks.

Kind Regards, Alexandre Em 05/04/2015 13:29, "manasiarora" notifications@github.com escreveu:

Hi Alex,

Have done a lot of code fixing for c# . net forms. Shall mail it or upload it asap.

Thanks n regards Manasi On 5 Apr 2015 16:29, "alex0077" notifications@github.com wrote:

Hello,

I need help on how to use this edit inline with JTable using C# asp.net webforms. So is someone have a code sample or tutorial about hot to use it I would appreciate very much. Thank you.

— Reply to this email directly or view it on GitHub https://github.com/hikalkan/jtable/issues/302#issuecomment-89752625.

— Reply to this email directly or view it on GitHub https://github.com/hikalkan/jtable/issues/302#issuecomment-89760521.

spacorum commented 9 years ago

With a little fix on the library code we can avoid non-editable fields to activate the inline editor:

Simply add this lines at jquery.jtable.editinline.js (line 59):

        if(!field.edit)
        {
            var fieldValue = record[fieldName];
            var defaultval = (fieldValue) ? fieldValue :'&nbsp;&nbsp;&nbsp;';  
            var txt = $('<span>' + defaultval + '</span>');
            return txt;
        }
mohdazmiw commented 9 years ago

Hi,

Can someone tell me how to use EditInline feature in ASP.NET MVC?

Thanks

mohdazmiw commented 9 years ago

Hi, I am now be able to use the jquery.jtable.editinline.js script in order to use editinline feature in asp.net mvc. However, I would like to know how to save the edited field in MVC? I mean, what kind of trigger I need to create in order to perform save operation in jtable?

rajvsankar commented 9 years ago

I want to thank you nubuntu and hikalkan for the great work. After great difficulties I made the interface to work with ColdFusion code. Couple of issues with multi columns toolbar search, it is not working on key-up, works on blur also I want to know how to insert a single input box to search all columns, like something available in datatable as default.

onratilla commented 9 years ago

where is the css that u used in toolbarsearch.js????

indi7 commented 9 years ago

Hi,

Can you show an example for toolbarsearch in c# webforms?

onratilla commented 9 years ago

C#,aspnet; add (string[] q,string[] opt) parameters your list action.In frontend use ajaxSettings: {data: {q: null,opt:null}}..In toolbarsearch.js, change reset button click and add parameters like that:self.load({q: null,opt:null});//self.load({}).Finally; again in toolbarsearch.js remove square brackets ;self.load({'q':$q,'opt':$opt}); //self.load({'q[]':$q,'opt[]':$opt});

indi7 commented 9 years ago

Hi, thank you for your response onratilla. I have a new problem now, the option "selecting" is incompatible with the toolbarsearch feature. When we activate the selecting option, the textboxes for search, shifts to the cell on the right. Do you know the solution for that? Thank you in advance.

jvsbautista commented 8 years ago

I have a main jtable with a child table and both have toolbar search enabled what happens is that when I search for something in the child table the request array also contains any input in the search fields in the main jtable.

How can I correct this or do you already have an update or correction that I may have missed? Thanks.

rusuhi commented 7 years ago

Hi thanks for extensions My experience; Editinline is somewhat working despite the date format comes as Date(65.... For list seleciton sometimes data get lost. for the toolbar search I can see the searc textbox but it is not functioning. Is there any functioning sample around?

dasguptahirak commented 7 years ago

@nubuntu I have tried to use editinline:{enable:true}, in my jable with jquery.jtable.editinline.js but its not working. Please guide us how to use in jsp page.

casanovadn commented 6 years ago

I try to use editinline with asp.net MVC, everything is OK, but it could not saved the modified data while it still update through Update Button @normally. Tell me how to fix it, please...

ghost commented 5 years ago

Thanks

bilalahmedlilla commented 4 years ago

I want to edit complete row at same time..is it possible using jtable