jquery xeditable , jquery datatablesの連携

時間無いので、とりあえずソースコピペ。
これでjquerydatablesをつかいつつ xeditable　で編集もできるようになる。

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/jq-2.2.4/dt-1.10.15/datatables.min.css"/>

<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/css/jquery-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/js/jquery-editable-poshytip.min.js"></script>

<style>
    .editable-empty {

        color: #666;

    }
</style>

<? $this->start('script');//script or css?>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/jq-2.2.4/dt-1.10.15/datatables.min.js"></script>


<script>

    $(function () {

        $.fn.editable.defaults.mode = 'inline';
//        $.fn.editableform.template = '<form class="form-inline editableform"><div class="control-group"><div><div class="editable-input"></div><div class="editable-buttons"></div></div><div class="editable-error-block"></div></div></form>';
        $.fn.editableform.buttons ='<button type="submit" class="editable-submit"><i class="fa fa-check" aria-hidden="true"></i></button>';
        var list = [
            "たろう",
            "じろう",
            "さぶろう",
            "はなこ"
        ];

        var url = "/writers/getAjaxFollower/";

//        日本語化
        $.extend( $.fn.dataTable.defaults, {
            language: {
                url: "https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
            }
        });

        table = $("#foo-table").DataTable({


            rowId: 'id',//tr ごとに row にIDをつける
            ajax: {
                url: url,
                dataSrc: function ( json ) {
                    //ここで形式などを変更することも可能。for文でリンクをつけたりとか。

//                    $.each(json,
//                        function(i, v) {
//                            console.log(v);
//
//                            if(){
//
//                            }
//
//                        }
//                    );

                    return json.customers;//json形式がおかしいので、わざわざ指定しておく
                }
            },
            columns: [
                { data: "dummy" },
                { data: "id" },
                { data: "name" },
                { data: "kyoka_count" },
                {
                    data: "memo",render:function(data){
                    return data;
                    }
                },
                {
                    data: "work_id",render:function(data){
                        return list[data];
                    }
                },
                { data: "tanka" },
                { data: "shiharai_kiji_count" },
                { data: "mikankin" },
            ]

            ,
            columnDefs: [
                {
                    className: "id", "targets": [ 1 ]//tdに名前をつける
                },
                {
                    className: "memo", "targets": [ 4 ]//tdに名前をつける
                },
                {
                    className: "work_id", "targets": [ 5 ]//tdに名前をつける
                },
                {
                    className: "tanka", "targets": [ 6 ]//tdに名前をつける
                },
                {
                    className: "shiharai_kiji_count", "targets": [ 7 ]//tdに名前をつける
                }
            ]

            ,

            drawCallback: function( settings ) {

//                ajaxターゲットにするURLを指定
                url = "/writers/mange/";

//                xeditableの前に id をつけていく
                $.each($("#foo-table td"),
                    function(i, v) {
                        tmp_pk = $(this).closest($('tr')).attr('id');
                        $(this).attr('data-pk',tmp_pk);
                    }
                );


                $('td.memo').editable({
                    type: 'textarea',
                    emptytext: '-',
                    url: url
                });

                $('td.work_id').editable({
                    type       : 'select',
                    showbuttons: false,
                    url: url,
                    source     : [
                        {value: 'yes', text: 'はい'  },
                        {value: 'no' , text: 'いいえ'}
                    ],

                    prepend    : '- 選択 -'  // テキストが空っぽの時に表示させる文字。（入力モード時）
                });

                $('td.tanka').editable({
                    url: url
                });

                $('td.shiharai_kiji_count').editable(
                    {
                        url: url
                    }
                );

            }

        });


    });
</script>

<? $this->end(); ?>



<table id="foo-table" class="table table-bordered">
    <thead>
    <tr>
        <th>
            <i class="fa fa-gear"></i>
        </th>
        <th>ID</th>
        <th>フォロワー</th>
        <th><i class="fa fa-pencil-square-o fa-fw" aria-hidden="true"></i>許可数</th>
        <th><i class="fa fa-pencil-square-o fa-fw" aria-hidden="true"></i>メモ</th>
        <th><i class="fa fa-pencil-square-o fa-fw" aria-hidden="true"></i>雇用</th>
        <th><i class="fa fa-pencil-square-o fa-fw" aria-hidden="true"></i>単価</th>
        <th><i class="fa fa-pencil-square-o fa-fw" aria-hidden="true"></i>依頼数</th>
        <th>未払い記事</th>
    </tr>
    </thead>
</table>