no change in column search with symfony orm

ng.somchith

hi all
I 'm trying to get - every column search - for a list of entity in Symfony 4 ,
in this part of code :

// Apply the search
table.columns().every( function () 
{
    var that = this;
    $( 'input', this.footer() ).on( 'keyup change clear', function () 
    {
        console.log('result ', that.search( this.value ).draw());
        //** in the console **: result =  v [Array(1), context: Array(1), selector: {…}, tables: ƒ, table: ƒ, draw: ƒ, …]

        console.log('condition = ',that.search() !== this.value );
        // **in the console **:  condition =  true 

        if ( that.search() !== this.value ) 
        {
            that
                .search( this.value )
                .draw();
        }
    } );
} );

it looks like everything 's fine but there 's no change in my page.

Can somebody help please ?
thanks

colin

Hi @ng.somchith ,

It might be a timing issue. Are you creating the input elements in the initComplete?

If not, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

ng.somchith

HI Colin
thanks very much for your answer.
I 'm new and don't know yet how to create a test case.

So I have create my first GitHUB for this here :
https://github.com/ngsomchith/symfony-datatable-orm

hope you can help
thanks
Ng.Somchith

colin

Hi @ng.somchith ,

Thanks for the code, I wouldn't know what to do with it, I'm afraid. Are you able to link to your page?

Cheers,

Colin

ng.somchith

hi Colin
I 've only use symfony in local.
I check how to upload it and come back later .
thanks

ng.somchith

hi Colin
I have mad it

here is my link :
http://s751326739.onlinehome.fr/symfony4/datatablesqlite/public/#

If you can help me to find out how to resolve it
Thanks very very much

Somchith NGUYEN

allan

Thanks for the link. The problem is that you are adding the table footer element (and cells) after the table has been initialised. So column().footer() isn't going to return anything since DataTables doesn't know about the footer element (it wasn't present when initialised and isn't picked up dynamically).

You need to add the footer cells before initialising the DataTable. That looks a little tricky in this case since you are dynamically loading the table configuration, including the columns.

As such, I'd suggest that you add the event handler here:

$(this).html( '<input type="text" placeholder="Search '+title+'" />' );

e.g. you could do:

$(this).append( $('<input type="text" placeholder="Search '+title+'" />').on('change', function () {
  ...
} );

That said, this will not work with column visibility. If you hide any columns this will break since, again, DataTables doesn't know about the footer so it won't hide the cells.

Allan

ng.somchith

hi Colin
Thanks very much for the answer .
I think I can work it out with your remark.
I 'll come back when I ' ll can make it

Somchith

ng.somchith

thenks Allans
sorry

ng.somchith

hi Colin and Allans
Thanks you very much to you 2
I 've made it .
here is the link
http://s751326739.onlinehome.fr/symfony4/datatable_orm_sqlite/public/
Somchith NGUYEN

colin

Hi @ng.somchith ,

That appears to be working for me - any value entered in the footer's input elements filters as expected. Could you give steps to reproduce, please.

Cheers,

Colin

ng.somchith

hi Colin

here is my function =

<script src="{{ asset('bundles/datatables/js/datatables.js') }}"></script>
<script>
    // datatable foot

    $(function() {

        // --------------------------------------------------------- {deferLoading:true, searching:true},
        /******************* zone test ---------------------*/
             $('#example').initDataTables( {{ datatable_settings(datatable) }}, 
             {
                initComplete: function () 
                {
                    //l'élément example charge les données dans Datatable
                    // mais on ne l'affiche pas
                    //console.log('65 example.Datatable ready',$('#example').DataTable() );
                    console.log('66 dt',$('#dt').DataTable() );
                    // il est préférable de travailler avec dt
                    $('#dt').append("<tfoot id='dtfoot'></tfoot>");
                    console.log(' ------------------ each  column tfoot -------------');
                    myTD2=document.getElementById('dt')
                    console.log('article line 74',myTD2); 
                    myThead=myTD2.children[0].children[0];
                    console.log('article line 75',myThead);

                    i=0;
                    $('#dt thead th').each( function () {

                        var title = $(this).text();
                        title = myThead.children[i].innerText;
                        i++;
                        console.log('84 table ',title);
                        $('#dtfoot ').append( $('<th> <input type="text" placeholder="Search '+title+'" /></th>').on('change', function () {
                            console.log('each column foot');
                        }) );
                    } );
                    console.log(' ------------------ fin  column tfoot -------------');
                $('#dt2').html($('#dt').html());
                // --------------- colum serach from idex : ok ----------------
                // --------------- colum serach from idex : ok ----------------
                // --------------- colum serach from idex : ok ----------------

                    // DataTable
                    var table2 = $('#dt2').DataTable();
                    console.log('497 table ',table2);

                    // Setup - add a text input to each footer cell
                    $('#dt2 tfoot th').each( function () {
                        var title = $(this).text();
                        console.log('137 table ',title);
                        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
                    } );
                    // Apply the search
                    table2.columns().every( function () 
                    {
                        var that = this;

                        console.log('528 columns ',that);
                        $( 'input', this.footer() ).on( 'keyup change clear', function () 
                        {
                            if ( that.search() !== this.value ) 
                            {
                                that
                                    .search( this.value )
                                    .draw();                     
                            }
                        } );
                    } );
                // ------------------------------------------------------------
                // ------------------------------------------------------------
                // ------------------------------------------------------------
                    
                }


             });
   
    });

</script>

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

ng.somchith

my link is moved to

http://s751326739.onlinehome.fr/symfony4/datatable_orm_sqlite0/public/

colin

That still appears to be working for me - any value entered in the footer's input elements filters as expected. Could you give steps to reproduce, please.

ng.somchith

hi colin
these are my steps : tell me in which step you need details
1) create symfony project
2) create entity
// in this function
3) import data in $(#example)
4) create his tfoot by his children $('#td tfoot')
5) duplicate to $('#dt2')
6) create $('#dt2 tfoot th ')
7) and finally, create $('#dt2').DataTable()

Somchith NGUYEN

colin

I meant how can I reproduce the issue on http://s751326739.onlinehome.fr/symfony4/datatable_orm_sqlite0/public/ ... As I've said many times, those searches are behaving as expected to me.

ng.somchith

hi Colin,
I upload my html and my Controller, So I think you 'll be able to reproduce it,

heres 's my entity
<?php

namespace App\Entity;

use Doctrine\ORM\Mapping as ORM;

/**
* @ORM\Entity(repositoryClass="App\Repository\ArticleRepository")
*/
class Article
{
public function __construct(){
$this->unite = 'pce';
$this->stockmin = 3;
}

/**
 * @ORM\Id()
 * @ORM\GeneratedValue()
 * @ORM\Column(type="integer")
 */
private $id;

//------------------------------------------------

public function getId(): ?int
{
    return $this->id;
}

/**
 * @ORM\Column(type="string", length=255, nullable=true)
 */
private $article;
/**
 * @ORM\Column(type="string", length=255, nullable=true)
 */
private $ref;

/**
 * @ORM\Column(type="string", length=255, nullable=true)
 */
private $designation;

/**
 * @ORM\Column(type="string", length=255, nullable=true)
 */
private $stockmin;

/**
 * @ORM\Column(type="integer", nullable=true)
 */
private $qte;

/**
 * @ORM\Column(type="decimal", precision=10, scale=2, nullable=true)
 */
private $prixu;




public function getRef(): ?string
{
    return $this->ref;
}

public function setRef(string $ref): self
{
    $this->ref = $ref;

    return $this;
}


public function getArticle(): ?string
{
    return $this->ref;
}

public function setArticle(string $article): self
{
    $this->article = $article;

    return $this;
}   

public function getDesignation(): ?string
{
    return $this->designation;
}

public function setDesignation(string $designation): self
{
    $this->designation = $designation;

    return $this;
}

public function getStockmin()
{
    return $this->stockmin;
}

public function setStockmin(string $stockmin): self
{
    $this->stockmin = $stockmin;

    return $this;
}

public function getQte(): ?int
{
    return $this->qte;
}

public function setQte(?int $qte): self
{
    $this->qte = $qte;

    return $this;
}

public function getPrixu(): ?string
{
    return $this->prixu;
}

public function setPrixu(?string $prixu): self
{
    $this->prixu = $prixu;

    return $this;
}

}

ng.somchith

and the controller :

<?php

namespace App\Controller;

use App\Entity\Article;
use Symfony\Component\HttpFoundation\Request;
use Omines\DataTablesBundle\Column\TextColumn;
use Symfony\Component\Routing\Annotation\Route;
use Omines\DataTablesBundle\Controller\DataTablesTrait;
use Omines\DataTablesBundle\Adapter\Doctrine\ORMAdapter;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;

class DatatableController extends Controller
{

/**
* @Route("/")
*/

use DataTablesTrait;

public function showAction( Request $request)
{
$table = $this->createDataTable()
->add('ref', TextColumn::class, ['label' => 'ref', 'className' => 'bold'])
->add('designation', TextColumn::class, ['label' => 'Désignation', 'className' => 'bold'])
->add('stockmin', TextColumn::class, ['label' => 'Stock critique', 'className' => 'bold'])
->add('prixu', TextColumn::class, ['label' => 'prix U.', 'className' => 'bold'])
->add('qte', TextColumn::class, ['label' => 'qte dispo.', 'className' => 'bold'])
//->add('company', TextColumn::class, ['field' => 'company.name'])

->createAdapter(ORMAdapter::class, [
    'entity' => Article::class,
])
->handleRequest($request);

if ($table->isCallback()) {
  return $table->getResponse();
}

return $this->render('/datatable/datatable.list.html.twig', [
  'datatable' => $table
  ]);

}
}

ng.somchith

and my HTML with his script

<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/v/dt/jq-3.2.1/dt-1.10.16/datatables.min.css"/>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">

Loading...

Loading dt2... $(function() { // --------------------------------------------------------- {deferLoading:true, searching:true}, /******************* zone test ---------------------*/ $('#example').initDataTables( {{ datatable_settings(datatable) }}, { initComplete: function () { //l'élément example charge les données dans Datatable // mais on ne l'affiche pas //console.log('65 example.Datatable ready',$('#example').DataTable() ); console.log('66 dt',$('#dt').DataTable() ); // il est préférable de travailler avec dt $('#dt').append(""); console.log(' ------------------ each column tfoot -------------'); myTD2=document.getElementById('dt') console.log('article line 74',myTD2); myThead=myTD2.children[0].children[0]; console.log('article line 75',myThead); i=0; $('#dt thead th').each( function () { var title = $(this).text(); title = myThead.children[i].innerText; i++; console.log('84 table ',title); $('#dtfoot ').append( $(' ').on('change', function () { console.log('each column foot'); }) ); } ); console.log(' ------------------ fin column tfoot -------------'); $('#dt2').html($('#dt').html()); // --------------- colum serach from idex : ok ---------------- // --------------- colum serach from idex : ok ---------------- // --------------- colum serach from idex : ok ---------------- // DataTable var table2 = $('#dt2').DataTable(); console.log('497 table ',table2); // Setup - add a text input to each footer cell $('#dt2 tfoot th').each( function () { var title = $(this).text(); console.log('137 table ',title); $(this).html( '' ); } ); // Apply the search table2.columns().every( function () { var that = this; console.log('528 columns ',that); $( 'input', this.footer() ).on( 'keyup change clear', function () { if ( that.search() !== this.value ) { that .search( this.value ) .draw(); } } ); } ); // ------------------------------------------------------------ // ------------------------------------------------------------ // ------------------------------------------------------------ } }); });

Hope this can help
Somchith NGUYEN