I'm using a search box this way:

[ div id="PeopleTableContainer" style="width: 1200px;text-align:right;" ]

[ form ]
    [ span style="font-family: 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;font-size: 13px; font-weight: 600;"] Pesquisa: [ /span ]

[ input type='text' name='pesquisa' id='pesquisa' style="font-family: 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;font-size: 12px; font-weight: 400;" / ]

   [ button type="submit" id="LoadRecordsButton" style="font-family: 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;font-size: 13px; font-weight: 600;"]Busca[/button ]
[ /form ] 
[ /div ]

I want to know if there's a way to put this text box and the button inside the toolbar? Or better, if i can make a "second" toolbar just for the search field.

Thank you all for the help and the problem is solved, details attached for reference:

HTML

                CountryCode: {
                    title: 'Country Code',
                    width: '15%',
                    options :  'CascadeActions2.php?action=countrylist'  //dynamic from database
                },
                CityName: {
                    title: 'City Name',
                    width: '25%',
                    display: function (data) {
                        return( data.record.CityName );
                    },
                    dependsOn: 'CountryCode', //Cities depends on countries. Thus, jTable builds cascade dropdowns!
                    options: function (data) {
                        if (data.source == 'list') {
                            return 'CascadeActions2.php?action=citylist&Country=0';
                        }
                        return 'CascadeActions2.php?action=citylist&Country=' + data.dependedValues.CountryCode;
                    }
                },

Program PHP:

else if($_GET["action"] == "citylist") {

    $country=($_GET['Country']);
    $result = mysql_query("SELECT Name, CountryCode FROM city WHERE CountryCode = '".$country."'");

    $rows = array();
    while ($row = mysql_fetch_array($result)) {
        $eil = array();
        $eil["DisplayText"] = $row[0];
        $eil["Value"] = $row[0];
        $rows[] = $eil;
        }
    $jTableResult = array();
    $jTableResult['Result'] = "OK";
    $jTableResult['Options'] = $rows;  
    print json_encode($jTableResult);    }

I was wondering, how can I implement multiselect dropdown ?? Please suggest the best way to do multiselect dropdown in jTable. Looking forward to hear from you guys asap.

cheers!! gaurav

I have the requirement of upload file from the list view. I have list of items, first two columns are master child table, 3rd column is a image control which will be the event raiser for file upload click event. Inside the image click event i triggered the file uploader click event but it is not firing. Can you please help me to sort out the problem. Urgent!!!

display: function (quoteHeaderData) { //Create an image that will be used to open child table var $img1;

                if (quoteHeaderData.record.DocID > 0)
                    $img1 = $('<img class="child-opener-image" src="/images/QuoteDetailCustomer.png" title="Edit Quote Trans" />');
                else
                    $img1 = $('<img class="child-opener-image" src="/images/QuoteDetailProduct.png" title="Edit Quote Trans" />');
                //Open child table when user clicks the image
                $img1.click(function (e) {
                    $("#hndFileQuoteHeader").val(quoteHeaderData.record.QuoteHeaderID);
                    **$("#fileQuoteHeader").click();**
                });
                //Return image to show on the person row
                return $img1;
            }

I'm trying to add a toolbar that can be used to add custom icons/buttons to the table. Also, 'add new record' is moved to this toolbar. Does it look good? See image below:

Hi All,

I been trying to add an on-click to expand a cell into a child table. But data doesn't see to get loaded. I understand there are examples and many have already fixed this, but I still cant figure out what's wrong with my code.

Please help. Below is a code snap.

 //Prepare jtable plugin
    $('#MQReposTable').jtable({
        title: 'The MQ Repos v0.1',
        paging: true,
        pageSize: 10,
        sorting: true,
        defaultSorting: 'APP ASC',
        selecting: true, //Enable selecting
        multiselect: false, //Allow multiple selecting
        selectingCheckboxes: false, //Show checkboxes on first column
        selectOnRowClick: true, //Enable this to only select using checkboxes
        actions: 
        {
            listAction: 'CRUDController?action=listByFilter',
            createAction:'CRUDController?action=create',
            updateAction: 'CRUDController?action=update',
            deleteAction: 'CRUDController?action=delete'
  
        },
        toolbar: 
        {
            items: [ {tooltip: 'Export this table to excel', icon: 'imgs/excel.png', text: 'Export to Excel', click: function (){  alert('This is yet to be implemented.'); } }]
        },
        fields: 
        {
        	App_ID: {key: true, create: false,edit: false,list: false},
        	App_ID: {title:'ID', key: true,list: true,create:true,width: '10px'},
        	REGION: {title:'ENV',edit: true, list: false},
        	APP_NAME: {title:'APPLICATION',width: '40%',edit:true},
        	APP_ACRONYM: {title:'Acronym',width: '30px',edit:true },
        	QMGR:  {title:'QMGR', width: '12px',edit: true},
        	Primary_server:{title:'P_Server',	width: '72px',edit: true},
        	Secondary_server:{title:'S_Server',	width: '72px',edit: true},
        	OS_TYPE:{title:'OS',width: '12px',edit: true},
        	Client_Version:{title:'MQ Client Ver',width: '12px',edit: true},
        	APP_TECHNOLOGY:{title:'TECHNOLOGY',width: '12px',edit: true},
        	VERSION:{title:'VERSION',width: '12px',edit: true},
        	REGION:{title:'REGION',width: '12px',edit: true},
        	SEG_ID:{title:'Segment',width: '12px',edit: true},
            Others: { title: 'More', width: '12px', sorting: false, edit: false, create: false,listClass: 'child-opener-image-column',
                display: function (app) {
                    //Create an image that will be used to open child table
                	console.log(JSON.stringify(app));
                    var $img = $('<img class="child-opener-image" src="imgs/list_metro.png" title="Expand View" />');

                    //Open child table when user clicks the image
                    $img.click(function () {

                        $('#MQReposTable').jtable('openChildTable',
                                $img.closest('tr'),
                                {
                                    title: app.record.APP_NAME + ' - Details',
                                    actions: 
                                    {
                                        listAction: 'CRUDController?action=getAppById' ,
                                        deleteAction: '/Demo/DeletePhone',
                                        updateAction: '/Demo/UpdatePhone',
                                        createAction: 'CRUDController?action=getAppById?App_ID=' + app.record.App_ID
                                    },
                                    fields: 
                                    {
                                    	APP_NAME: {title:'Application Name', key: true,list: true,create:true,width: '5px', defaultValue: app.record.APP_NAME},
                                        QMGR:{ title: 'QMGR', width: '5px',edit: true}
                                    } 
                                
                              }, 
                              function (data) { //opened handler
                                    data.childTable.jtable('load');
                        });
                    });
                    //Return image to show on the person row
                    return $img;
                }
            },
        },

JSON for child is

{"Result":"OK","Record":{"App_ID":1,"APP_NAME":"APP1","APP_ACRONYM":"APP1","QMGR":"ABC","Primary_server":"servers1","Secondary_server":"server2","OS_TYPE":"OEL","Client_Version":9.0.0.0","APP_TECHNOLOGY":"Java","VERSION":"1.7","REGION":"ABC"}}

Kindly suggest. Though my parent table loads, I have spend days with no clue why child table not working.

Thanks in advance.

Hi

I'm stuck - so i would be very happy, if someone could show me the server side code, in php, for the demo "Master/Child tables" : http://jtable.org/Demo/MasterChild.

Thank you

Hai,

Currently i am using jtable plugin.first of all thanks to all implement this great and nice plugin.

How to open new popup window,when i clicks on the image/button,how fulfill this requirement using jtable plugin.i strucked here from past 4 days.

please help me.Thanks in advance.

HI,

I'm trying a simple example handing off listAction to a function, not to a server post.

function foo() { return { "Result": "OK", "Records": [{ "Id": 1, "ArchiveId": "39", "ServiceNumber": "123", "SourceNumber": "a", "SalesName": "Sarah", "Type": "1", "UserName": "Me"}], "TotalRecordCount": 1 }; }

title: 'Deployment History', actions: { listAction: foo(), deleteAction: '@Url.Action("myDelete")', updateAction: '@Url.Action("myUpdate")', createAction: '@Url.Action("myCreate")' },

Nothing is returned and I get a cannot communicate with server error. I didn't think it would be connecting to a server as its static data being returned.

it may be a simple question/answer - I just downloaded and was looking at the code $result = mysql_query("SELECT * FROM people ORDER BY " . $_GET["jtSorting"] . " LIMIT " . $_GET["jtStartIndex"] . "," . $_GET["jtPageSize"] . ";");

where does the jtSorting, jtStartIndex jtPageSize values come from? I want to pass my own parameters to the SQL statement and just wanted to know where to put those values so that they can be received on the PHP page

I need to do something like this:

table with 3 columns edit, delete and display:

Image 2: if click in button display i can get "id" of any row/record:

i dont know what to do that if you can help me thank you.

I'm looking for the easiest way to sort a Jtable column that consists of numbers and text, and a combination of these.

E.g.

'1B1' '1A2' '1A100' '1A1' '1A10'

turns into (correct)

'1A1' '1A2' '1A10' '1A100' '1B1'

Jtable sorts like this: (wrong)

'1A1' '1A10' '1A100' '1A2'

thank you

Hola. Quisiera saber como puedo controlar cuando da algún error la carga del objeto jtable. El caso es que si se produce un error en el controlador, hago lo siguiente: $jTableResult['Result'] ='error'; pero luego como puedo controlar dicho resultado en la parte donde cargo el div que contiene el objeto jtable? Gracias de antemano y un saludo.

I'm trying to upgrade to version 2.6.0 and got this error

jquery-3.6.0.js:4059 Uncaught TypeError: Cannot read properties of undefined (reading 'recordPreview') at $..._addColumnsToHeaderRow (jquery.jtable.js:3102:30) at $..._addColumnsToHeaderRow (jquery.jtable.js:3474:41) at $..._addColumnsToHeaderRow (jquery.jtable.js:3794:41) at $..._addRowToTableHead (jquery.jtable.js:305:18) at $..._addRowToTableHead (jquery-ui.js:415:25) at $..._createTableHead (jquery.jtable.js:296:18) at $..._createTableHead (jquery-ui.js:415:25) at $..._createTable (jquery.jtable.js:286:18) at $..._createTable (jquery-ui.js:415:25) at $..._create (jquery.jtable.js:150:18)

Thanks for any help. Best regards

Hi Hikalkan, I'm using this wonderful lib for more than 5 years and its version is 2.4.0. Could you give me a full samples of newest version in 2.6.0 or 2.7.0. I couldn't find anywhere. Thank for your help

Hola. Quisiera poder hacer un print_r de los arrays que envia y maneja jTable . Cuando intento hacerlo en el controlador de jTable, da un error de comunición con el servidor y no puedo verlos. Si alguien puede echarme una mano, se agradece

Saludos