Lost on Editable

Lost on Editable

chas2002chas2002 Posts: 8Questions: 0Answers: 0
edited October 2013 in DataTables 1.9
Hi,

I'm able to return data from my mysql tables and it works like a champ.

I'm using this code to return the dataset: [code]


$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "server_processing1.php"
} );
} );


[/code]

With data showing, I decided to move to the next step: add, edit and delete. I've tried all the examples and I used the generator, but nothing is working. No matter what I do, it always shows "Loading Data from Server".

I need help, obviously, but in more ways than one:)

Table name and fields:

$aColumns = array( 'ID', 'Country_Name', 'country_code', 'Status', 'created_by', 'created_on' );

/* Indexed column (used for fast and accurate table cardinality) */
$sIndexColumn = "id";

/* DB table to use */
$sTable = "qcccountry";

Can someone show me how to retrieve records and add, edit, delete?

Thanks,
Chas

Replies

  • chas2002chas2002 Posts: 8Questions: 0Answers: 0
    I almost have it working (I think). I keep getting:

    [quote]DataTables warning (table id = 'example'): Requested unknown parameter '6' from the data source for row 0"[/quote]

    I'm using the following code as a test:

    [code]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">





    DataTables example

    @import "http://datatables.net/release-datatables/media/css/demo_page.css";
    @import "http://datatables.net/release-datatables/media/css/demo_table.css";
    td input { width: 100% }
    #example_wrapper { min-height: 0; }






    $(document).ready(function() {
    $('#example').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "server_processing1.php"
    } );
    } );



    function restoreRow ( oTable, nRow )
    {
    var aData = oTable.fnGetData(nRow);
    var jqTds = $('>td', nRow);

    for ( var i=0, iLen=jqTds.length ; i
  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin
    Hi,

    Since you are using server-side processing, the fnUpdate function is actually relatively useless since it doesn't interact with the server. What you probably want to do is simply call fnDraw in the Ajax success functions once the server has been updated with the edited / created / deleted data.

    Allan
  • chas2002chas2002 Posts: 8Questions: 0Answers: 0
    Hi Allan,

    Sorry to be so lost here... I checked fnDraw but there really wasn't an example that helped me with the logic. I assume I should replace:

    [code] function saveRow ( oTable, nRow )
    {
    var jqInputs = $('input', nRow);
    oTable.fnUpdate( jqInputs[0].value, nRow, 0, false );
    oTable.fnUpdate( jqInputs[1].value, nRow, 1, false );
    oTable.fnUpdate( jqInputs[2].value, nRow, 2, false );
    oTable.fnUpdate( jqInputs[3].value, nRow, 3, false );
    oTable.fnUpdate( jqInputs[4].value, nRow, 4, false );
    oTable.fnUpdate( jqInputs[5].value, nRow, 5, false );
    oTable.fnUpdate( 'Edit', nRow, 6, false );
    oTable.fnDraw();
    }
    [/code]

    with something like this?????

    [code] function saveRow ( oTable, nRow )
    {
    var jqInputs = $('input', nRow);
    oTable.fnDraw( jqInputs[0].value, nRow, 0, false );
    oTable.fnDraw( jqInputs[1].value, nRow, 1, false );
    oTable.fnDraw( jqInputs[2].value, nRow, 2, false );
    oTable.fnDraw( jqInputs[3].value, nRow, 3, false );
    oTable.fnDraw( jqInputs[4].value, nRow, 4, false );
    oTable.fnDraw( jqInputs[5].value, nRow, 5, false );
    oTable.fnDraw( 'Edit', nRow, 6, false );
    oTable.fnDraw();
    }
    [/code]

    I'm not sure what step I'm missing...

    Thanks,
    Chas
  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin
    Delete lines 3-10 in your second code block there. Leave just fnDraw - you just want a refresh of the data from the database.

    Having said that, have you got an Ajax call to the server to actually do the save somewhere?

    Allan
  • chas2002chas2002 Posts: 8Questions: 0Answers: 0
    No, I haven't saved the ajax result. It delivers to the table. How do I save the result then edit?
  • chas2002chas2002 Posts: 8Questions: 0Answers: 0
    After three days, I'm still lost on this process and it's me, not the code. I was able to get jQuery EasyUI to work, so I think I understand the process. I would rather use datatables because my theme was built with css that supports it. I understand and am able to show records from a table using the "sAjaxSource": "server_processing1.php" as shown above. But I'm missing a step or two to make that table editable and save the results to the table.

    The basic gist:

    I have a table called core_countries with fields: ID, Country_Name, Country_Code, Status, created_by and created_on.

    I just want to show the fields and allow CRUD.

    Thanks,
    Chas
  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin
    > How do I save the result then edit?

    Make an Ajax call use `$.ajax` - http://api.jquery.com/jQuery.ajax/ . You need to write a server-side script which will update the database as well.

    You might be interested in Editor which has all this done for you already: http://editor.datatables.net/

    Allan
  • chas2002chas2002 Posts: 8Questions: 0Answers: 0
    Hi Allan,

    Yes, I did use the generator on editor and it does work, but the popover forms break my theme. I'm looking for inline edits and controls. Is there a way on the generator to create inline CRUD?
  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin
    Something a little like this perhaps: http://editor.datatables.net/tutorials/display_controllers ? Currently Editor doesn't have an inline mode, but v1.3 will introduce a new bubble editing mode which will provide all the goodness of inline editing without the problems.

    Allan
  • chas2002chas2002 Posts: 8Questions: 0Answers: 0
    I do think that would work. So the table data is being delivered via "sAjaxSource": "/release/DataTables/extras/Editor/examples/php/browsers.php",

    And the edit is done with: "ajaxUrl": "/release/DataTables/extras/Editor/examples/php/browsers.php",

    How can I view those two .php files so that I can create them locally...
  • chas2002chas2002 Posts: 8Questions: 0Answers: 0
    Is this the php code for http://editor.datatables.net/tutorials/display_controllers

    [code]<?php

    /*
    * Example PHP implementation used for the index.html example
    */

    // DataTables PHP library
    include( "lib/DataTables.php" );

    // Alias Editor classes so they are easy to use
    use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Join,
    DataTables\Editor\Validate;

    // Build our Editor instance and process the data coming from _POST
    Editor::inst( $db, 'browsers' )
    ->fields(
    Field::inst( 'engine' )->validator( 'Validate::required' ),
    Field::inst( 'browser' )->validator( 'Validate::required' ),
    Field::inst( 'platform' ),
    Field::inst( 'version' ),
    Field::inst( 'grade' )->validator( 'Validate::required' )
    )
    ->process( $_POST )
    ->json();
    ?>[/code]
  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin
    > How can I view those two .php files so that I can create them locally...

    Click the "PHP" tab just below the table here: http://editor.datatables.net/release/DataTables/extras/Editor/examples/index.html . Or you can download the trial package - the files are all in there.

    Regards,
    Allan
This discussion has been closed.