在附加的td上进行x可编辑

Question

我有一个表，当用户从下拉菜单中选择一个选项时，数据将返回到该表中，但是附加的数据无法获得x可编辑的功能。

我想知道如何将x可编辑的代码添加到表中的附加数据中。

代码

view

$(document).ready(function() {

      $('.username').editable({
            url  : this.url,
            pk   : this.id,
            type : 'text',
            validate:function(value){
                if($.trim(value) === '')
                {
                    return 'This field is required';
                }
            }
        });
        
  $('select[name="school"]').on('change', function() {
    var schoolId = $(this).val();
    console.log(schoolId);

    $('.data_table').DataTable({
      "drawCallback": function(settings) {
        $('#ddd').html(settings._iRecordsTotal + ' Students');
      },

      processing: true,
      destroy: true,
      language: {
        processing: '<span>Processing...</span>',
      },
      serverSide: true,
      ajax: '{{ url('
      dashboard / studentsIndexData ') }}/' + schoolId,
      columns: [{
          data: 'id'
        },
        {
          data: 'photo'
        },
        {
          data: 'students'
        },
        {
          data: 'semester'
        },
        {
          data: 'class'
        },
        {
          data: 'action',
          orderable: false,
          searchable: false
        },
      ],
      "order": [
        [0, "desc"]
      ],
      dom: 'Bfrtip',
      buttons: [{
          extend: 'copy',
          exportOptions: {
            columns: [0, ':visible']
          }
        },
        {
          extend: 'excel',
          exportOptions: {
            columns: ':visible'
          }
        },
        {
          extend: 'csv',
          exportOptions: {
            columns: ':visible'
          }
        },
        {
          extend: 'pdfHtml5',
          exportOptions: {
            columns: [2, 3, 1]
          }
        },
        {
          extend: 'print',
          exportOptions: {
            columns: ':visible'
          }
        },
        'colvis'
      ]
    });
  });
});

<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/jquery-editable/jquery-ui-datepicker/css/redmond/jquery-ui-1.10.3.custom.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap-editable/js/bootstrap-editable.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-4">
    <div class="panel">
      <div class="panel-body">
        <label for="school">Schools</label>
        <select name="school" id="school" class="form-control">
          <option value="1">Scool 1</option>
          <option value="2">Scool 2</option>
          <option value="3">Scool 3</option>
          <option value="4">Scool 4</option>
        </select>
      </div>
    </div>
  </div>
</div>

<div class="table-responsive">
  <table class="table table-striped table-bordered data_table width-full">
    <thead>
      <tr>
        <th width="50">#</th>
        <th width="60">Photo</th>
        <th>Student</th>
        <th>Semester</th>
        <th>Class</th>
        <th width="200">Action</th>
      </tr>
    </thead>
  </table>
</div>

Back-end

public function indexData($id)
{
    $students = DB::table('schools')
        ->where('schools.id', $id)
        ->join('school_semesters', 'school_semesters.school_id', '=', 'schools.id')
        ->join('semester_classes', 'semester_classes.semester_id', '=', 'school_semesters.id')
        ->join('class_students', 'class_students.class_id', '=', 'semester_classes.id')
        ->join('users', 'users.id', '=', 'class_students.user_id')
        ->join('user_profiles', 'users.id', '=', 'user_profiles.user_id')
        ->select(
            \DB::raw('group_concat(DISTINCT school_semesters.name) as semester'),        
            \DB::raw('group_concat(DISTINCT semester_classes.name) as class'),
            'users.name as students',
            'user_profiles.photo as photo',
            'users.id as id'
        )
        ->groupBy('users.id')
        ->get();

    return datatables()->of($students)
        ->escapeColumns(['action'])
        ->setRowId('id')
        ->addColumn( 'photo', function ( $student ) {
            return [
                '<a target="_blank" href="' . url('images') . '/' . $student->photo . '"><img src="' . url('images') . '/' . $student->photo . '" alt="' . $student->students . '" width="50" height="50" /></a>'
            ];
        })
        ->addColumn( 'students', function ( $student ) {
            return [
                '<a href="#" data-type="text" data-title="Change Student Name" data-name="name" data-url="'. route('schoolAjaxUpdate').'" data-pk="'.$student->id.'" class="username">'.$student->students.'</a>'
            ];
        })
        ->addColumn( 'action', function ( $student ) {

            if(!empty($student->deleted_at)) {
                $mm = '<form style="display: inline;" action="'. route('usersRestore', $student->id) .'" method="POST">
                        <input type="hidden" name="_method" value="POST">
                        <input type="hidden" name="_token" value="'. csrf_token() .'">
                        <button type="submit" class="btn btn-xs btn-warning">
                        <i class="fa text-white fa-recycle"></i> Restore</button>
                        </form>';
            } else {
                $mm = '<form style="display: inline;" action="'. route('users.destroy', $student->id) .'" method="POST">
                        <input type="hidden" name="_method" value="DELETE">
                        <input type="hidden" name="_token" value="'. csrf_token() .'">
                        <button type="submit" class="btn btn-xs btn-danger">
                        <i class="fa text-white fa-trash"></i> Remove</button>
                        </form>';
            }
            return [
                '<a href="' . route( 'users.show', $student->id ) . '" class="btn btn-xs btn-info"><i class="fa text-white fa-eye"></i> Show</a>',
                '<a href="' . route( 'users.edit', $student->id ) . '" class="btn btn-xs btn-primary"><i class="fa text-white fa-pencil"></i> Edit</a>',
                $mm
            ];
        })
        ->toJson();
}

说明

因此，基本上，当我选择学校时，我的数据（服务器端）将返回表，应该对其进行x可编辑的部分是学生此处：

->addColumn( 'students', function ( $student ) {
            return [
                '<a href="#" data-type="text" data-title="Change Student Name" data-name="name" data-url="'. route('schoolAjaxUpdate').'" data-pk="'.$student->id.'" class="username">'.$student->students.'</a>'
            ];
})

当前，它以a标记形式返回，没有任何x可编辑的功能。

任何想法？

Answer 1

已解决

我将editable功能移到了dataTables drawCallback，现在可以使用了

"drawCallback": function( settings ) {
   $('#ddd').html(settings._iRecordsTotal + ' Students');


   $('.username').editable({
            url  : this.url,
            pk   : this.id,
            type : 'text',
            validate:function(value){
                if($.trim(value) === '')
                {
                    return 'This field is required';
                }
            }
  });
},

它做什么？

基本上它具有可触发的触发功能，直到dataTables将数据返回到表中为止。

希望它可以帮助有需要的人。