Filter and Sort on multi data

johngtrs

Hi,

I'm using this https://datatables.net/examples/api/multi_filter.html and I have a problem with the filters and the sort on 1 column because this column has multiple data and When I use the filter or the sort on this column it doesn't work. The others columns working perfectly.

Could you help me to fix it ? Here is my code.

<style type="text/css" class="init">

  tfoot {
      display: table-header-group;
  }

</style>

</style>

  <script type="text/javascript">
      $(document).ready(function() {
      $('#tableID').DataTable({
              serverSide: true,
              aaSorting: [[1, 'desc']],
              ajax: {
                  url: '/PATH/',
                  method: 'POST'
              },
              columns: [
                  {data: "data1"},
                  {data: "data2"},
                  {data: "data3"},
                  {data: function1},
                  {data: "data5"},
                  {data: "data6"},
                  {data: function2, searchable: false, orderable: false},
                  {data: function3, searchable: false, orderable: false}
              ]
          });

          function function1(data, type, dataToSet) {
            return data.data7 + ", " + data.data8 + " (" +data.data9+ ")";
          };

          function function2(data, type, dataToSet) {
            return "<a href='link?id="+data.id+"' <span class=\"glyphicon glyphicon-new-window\"></span></a>"; 
          };

          function function3(data, type, dataToSet) {
            return "<a href='data?id="+data.id+"' <span class=\"glyphicon glyphicon-file\"></span></a> <a href='test?id="+data.id+"' <span class=\"glyphicon glyphicon-download-alt\"></span></a>"; 
          };

        // Setup - add a text input to each footer cell
        $('#tableID tfoot th').not(":eq(6),:eq(7)") //Exclude columns 6, 7
                              .each( function () {
            var title = $('#tableID tfoot th').eq( $(this).index() ).text();
            $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
        } );

        // DataTable
        var table = $('#tableID').DataTable();

        // Apply the search
        table.columns().eq( 0 ).each( function ( colIdx ) {
            if (colIdx == 6 || colIdx == 7) return; //Do not add event handlers for these columns

            $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
                table
                    .column( colIdx )
                    .search( this.value )
                    .draw();
            } );
        } );
  });
  </script>

<table id="tableID" class="table table-striped table-bordered" cellspacing="0" width="100%">

  <thead> 
    <tr>
      <th>COLUMN 0</th>
      <th>COLUMN 1</th>
      <th>COLUMN 2</th>
      <th>COLUMN 3</th>
      <th>COLUMN 4</th>
      <th>COLUMN 5</th>
      <th>COLUMN 6</th>
      <th>COLUMN 7</th>
    </tr>

    <tfoot>
      <tr>
        <th>COLUMN 0</th>
        <th>COLUMN 1</th>
        <th>COLUMN 2</th>
        <th>COLUMN 3</th>
        <th>COLUMN 4</th>
        <th>COLUMN 5</th>
        <th></th>
        <th></th>
      </tr>
    </tfoot>

  </thead>

  <tbody>  
    </tbody>
</table>

johngtrs

SOLVED. I have concat my string in my sql query instead of concat my string in javascript.