JQuery Datatables Editor - 为每一行维护唯一的主键

时间:2014-10-07 10:52:58

标签: jquery datatables jquery-datatables jquery-datatables-editor

我想从名为' videoarchives'的数据库中映射id-key。到称为DT_RowId的DataTables-id。创建新行时,我希望它使用唯一的主键,并在编辑它时保持这个唯一的主键。

我想知道如何修改下面的videos.php中的代码以实现此目的。 我在文档中找到了这个例子,使用了另一种语法。我如何调整下面的代码来完成同样的事情? (http://www.datatables.net/examples/server_side/ids.html):

//应该读取并发送回DataTables的数据库列数组。 // db参数表示数据库中的列名,而dt //参数表示DataTables列标识符 - 在本例中为object //参数名称

$columns = array(
    array(
        'db' => 'id',
        'dt' => 'DT_RowId',
        'formatter' => function( $d, $row ) {
            // Technically a DOM id cannot start with an integer, so we prefix
            // a string. This can also be useful if you have multiple tables
            // to ensure that the id is unique with a different prefix
            return 'row_'.$d;
        }
    ),

videoadmin.html的一些代码:

$(document).ready(function() { //fields we can add or edit ?
    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/videos.php",
        table: "#example",
        idSrc: "DT_RowId",
        fields: [ 

            {
                label: "Title:",
                name: "videoarchives.Title"
            }, {
                label: "Date:",
                name: "videoarchives.Date",
                type: "date"
            }, {
                label: "VideoDescription:",
                name: "videoarchives.VideoDescription"
            }, {
                label: "Language:",
                name: "videoarchives.Language"
            }, {
                label: "Category:",
                name: "videoarchives.Category"
            }, {
                label: "VideoLink:",
                name: "videoarchives.VideoLink",

            }, {
                label: "HDLink:",
                name: "videoarchives.HDLink"
            },
            {
            label: "German title:",
            name: "videoarchives_german.TitleGerman"
            },
            {
            label: "German subtitle:",
            name: "videoarchives_german.SubtitleGerman"
            },
            {
            label: "German description:",
            name: "videoarchives_german.DescriptionGerman"
            }

        ]
    } );

    //oTable.fnSetColumnVis(0, false);
    //http://stackoverflow.com/questions/15892995/assign-id-to-datatable-row-from-json-data
    var dataTable = $('#example').DataTable( {
        dom: "Tfrtip",
        ajax: "../php/videos.php",

        columns: [

            { data: "DT_RowId" },
            { data: "videoarchives.Title" },

            { data: "videoarchives.Date" },
            { data: "videoarchives.VideoDescription" },
            { data: "videoarchives.Language" },
            { data: "videoarchives.Category" },
            { data: "videoarchives.VideoLink" },
            { data: "videoarchives.HDLink" },
            { data: "videoarchives_german.TitleGerman" },
            { data: "videoarchives_german.SubtitleGerman" },
            { data:  "videoarchives_german.DescriptionGerman"} 

        ],
        tableTools: {
            sRowSelect: "os",
            aButtons: [
                { sExtends: "editor_create", editor: editor },
                { sExtends: "editor_edit",   editor: editor },
                { sExtends: "editor_remove", editor: editor }
            ]
        } //table Tools

    } ); //end of init datatable...

    dataTable.fnSetColumnVis(0, false)

    /* Click event handler */
     $('#example tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        }
        else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    } );

    $('#button').click( function () {
        table.row('.selected').remove().draw( false );
    } );


} );

videos.php:

include( "../../php/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;
            $pkey = "id";

    // Build our Editor instance and process the data coming from _POST
    Editor::inst( $db, 'videoarchives', $pkey )
        ->fields(
            Field::inst( 'videoarchives.id' ),
            Field::inst( 'videoarchives.Title' )->validator( 'Validate::notEmpty' ),
            Field::inst( 'videoarchives.Date' ) ->validator( 'Validate::dateFormat', 
            array( "format"  => Format::DATE_ISO_8601,
                    "message" => "Please enter a date in the format yyyy-mm-dd" ) ) ->getFormatter( 'Format::date_sql_to_format', Format::DATE_ISO_8601 )
                ->setFormatter( 'Format::date_format_to_sql', Format::DATE_ISO_8601 ),
            Field::inst( 'videoarchives.VideoDescription' ),
            Field::inst( 'videoarchives.Language' ),
            Field::inst( 'videoarchives.Category' ),
            Field::inst( 'videoarchives.VideoLink' ),
            Field::inst( 'videoarchives.HDLink' ),
            Field::inst( 'videoarchives_german.TitleGerman' ),
            Field::inst( 'videoarchives_german.SubtitleGerman' ),
            Field::inst( 'videoarchives_german.DescriptionGerman' )

        )
        ->leftJoin( 'videoarchives_german', 'videoarchives_german.id', '=', 'videoarchives.id' )
        ->process( $_POST )
        ->json();

1 个答案:

答案 0 :(得分:0)

前端:

var dataTable = $('#example').DataTable( {
    dom: "Tfrtip",
    ajax: "../php/videos.php",

    columns: [
        { data: "DT_RowId", <!-- this is the primary key.. -->
            render: function ( data ) 
            {
              return data.replace( 'row_', '' );
            } 
        },
        { data: "videoarchives.Title" },

        { data: "videoarchives.Date" },
        { data: "videoarchives.VideoDescription" },
        { data: "videoarchives.Language" },
        { data: "videoarchives.Category" },
        { data: "videoarchives.VideoLink" },
        { data: "videoarchives.HDLink" },
        { data: "videoarchives_german.TitleGerman" },
        { data: "videoarchives_german.SubtitleGerman" },
        { data:  "videoarchives_german.DescriptionGerman"} 

    ],

后端:

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'videoarchives' )
    ->fields(
//      Field::inst( 'videoarchives.id' ), //The primary key should not be initiated here.
        Field::inst( 'videoarchives.Title' )->validator( 'Validate::notEmpty' ),
        Field::inst( 'videoarchives.Date' ) ->validator( 'Validate::dateFormat', 
        array( "format"  => Format::DATE_ISO_8601,
                "message" => "Please enter a date in the format yyyy-mm-dd" ) ) ->getFormatter( 'Format::date_sql_to_format', Format::DATE_ISO_8601 )
            ->setFormatter( 'Format::date_format_to_sql', Format::DATE_ISO_8601 ),
        Field::inst( 'videoarchives.VideoDescription' ),
        Field::inst( 'videoarchives.Language' ),
        Field::inst( 'videoarchives.Category' ),
        Field::inst( 'videoarchives.VideoLink' ),
        Field::inst( 'videoarchives.HDLink' ),
        Field::inst( 'videoarchives_german.TitleGerman' ),
        Field::inst( 'videoarchives_german.SubtitleGerman' ),
        Field::inst( 'videoarchives_german.DescriptionGerman' )

    )
    ->leftJoin( 'videoarchives_german', 'videoarchives_german.id', '=', 'videoarchives.id' )
    ->process( $_POST )
    ->json();