On new draw have Checked Checkboxes to top

kzenman

Ok, I'm on day 3 of getting this resolved...and just spent 2 hours on JS Bin to find it doesn't support AJAX. :-)

Anyway I'm hoping someone can guide me in the right direction.
Scenario: On page load a list with empty checkboxes is created, when a user selects a checkbox it moves to the top highlighted in green. Selects save and all works perfectly.
The problem that I can't seem to solve is when the user goes to edit that same data. I want to have the check boxes appear on top again. The code I have now they are selected and they are green but they are at the bottom.
MAIN CODE:

var table = $('#table-options').DataTable({
        "searching": true,
        "paging":   false,
        "ordering": true,
        "info":     false,
        "dom": 'lrtip',
        "fnCreatedRow": function( row, data, DataIndex ) {
          if(data.status == 1){
            $(row).attr('id', data.id).addClass('selected');
            $(row).find('input:eq(0)').prop( "checked", true );
          }else{
            $(row).attr('id', data.id).removeClass('selected');
          }
        },
    "ajax" : "{{ route('admin.communities.salesorder.getdata',['id' => $community_id, 'type' => 'all_options']) }}",
    "deferRender": false,
        "colReorder": {
            realtime: true
            },  
    "columns": [ 
      {data: '',
       defaultContent: "",
       visible: false },
      {data: '',
      render: function( row, data, DataIndex ) {
          return '<input type="checkbox" data-status="'+DataIndex.id+'" id="'+DataIndex.id+'" name="name">';
      },
       orderable: false,
       targets:   1
      },
      {data: 'plan_number'},
      {data: 'plan_name'},
      {data: 'price'}      
    ],
        select: {
            style:    'multi',
            selector: 'td:first-child'
        },
        order: [[ 2, 'asc' ]],
        orderFixed: [0, 'desc'],

  } );  

Then the button & function when someone clicks to get/edit the existing data

<a href="#" id="{{ $comm->id }}" onClick="showOptions(this.id, null);">Edit</a>

function showOptions(id, response=null){
        if(!id && response == null) return false;
      
            $('#cpospinner').show();
              var url = "{{ route('admin.communities.salesorder.getdata',[':id', 'type' => 'options_test']) }}";
              url = url.replace(':id', id);
              $('#table-options').DataTable().clear();
              var table2 = $('#table-options').DataTable().ajax.url( url ).load();
              table2.draw();
            $('#cpospinner').hide();
}

The Table:

 <table id="table-options" class="display select" style="width:100%;">
  <thead style="" class="tableHeader">
    <tr>
      <th></th>
      <th style="width:17px;"></th>
      <th>Name</th>
      <th>Position</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody id="options"></tbody>
</table>

Any help would be appreciated..

Thanks in advance!!!

kthorngren

JS BIN does support Ajax. The problem is your server is not accessible from the internet. Maybe you can simulate your data with Javascript, like this example. If you need help building a test case let us know.

Its hard to visualize what it happening with just the code snippets.

Kevin