About search builder.

nathanael · June 2021

Link to test case: http://live.datatables.net/rurofefu/1/edit
Debugger code (debug.datatables.net):
Error messages shown: one warning at http://live.datatables.net/rurofefu/1/edit
Description of problem:Hello,

Also whether able to place simply as shown in the image attached herewith like without the ADD CONDITION button ?

or how to use without the ADD CONDITION button ?

Looking for a help.

colin · June 2021

I'm sorry, I'm not clear what the issue is. Please can you elaborate,

Colin

nathanael · June 2021

Hi,

How to use the search builder as shown above in the image without clicking the button as normal as shown at http://live.datatables.net/rurofefu/1/edit.

Something same alike the lfip (Dom).

?

colin · June 2021

Ah I see, you can use pre-defined conditions with that, using searchBuilder.preDefined, see your example updated here: http://live.datatables.net/rurofefu/2/edit

Colin

nathanael · June 2021

Hi Colin & ALL,

                       Cheers for revert back with an answer.

But could you able to correct these two following

1) There shown a warning message at http://live.datatables.net/rurofefu/2/edit

2) Remove the close button as well ?

CHEERS AGAIN.

colin · June 2021

I'm not clear which warning message you're referring to. The close button can't optionally be removed, but you may be able to hide the element with hide(),

Colin

nathanael · June 2021

Hi Colin & All,

                    The warning message image is attached herewith.

Could you able to show me how to hide the close button image you mentioned ?

Cheers

colin · June 2021

Something like this : http://live.datatables.net/rurofefu/3/edit .

It won't be pretty, as it's not designed for it, but it may get you going,

Colin

nathanael · June 2021

Hi Colin & ALL,

                        Cheers for revert back.

Again three things if able to clarify

1) After a search and clicking the clear button the container div (search builder) shrink back to the button ?

Any way to make the container div (search builder) as visible in full even after clicking the clear button ?

2) Is there anywhere specify the id's and classes mentioned for each elements that available easily in the document ?

3) Still you don't answer about the warning message.

Cheers.

allan · June 2021

1) After a search and clicking the clear button the container div (search builder) shrink back to the button ?

When you click clear all it should revert to its initial state.

Any way to make the container div (search builder) as visible in full even after clicking the clear button ?

If you have a look at this example in your inspector, you'll see that it is full width:

The styling just doesn't really show that. You can add styling to it such as a border if you want to.

2) Is there anywhere specify the id's and classes mentioned for each elements that available easily in the document ?

I don't think we have documented the DOM structure actually. Best bet for the moment is to use your browser's inspector.

3) Still you don't answer about the warning message.

You can safely ignore that. The linter built into the live site shows warnings about ES6 code as it is really quite old now.

Allan

nathanael · June 2021

Hi Allan & ALL,

Any way to make the container div (search builder) as visible in full even after clicking the clear button ?

If you have a look at this example in your inspector, you'll see that it is full width:

For the above the table is in full width and the container (search builder) may also full width.

But what i mean is the search builder needs to be shown in full without shrink even after clicking the clear button ?

allan · June 2021

Do you mean you want this:

?

Allan

nathanael · June 2021

Hi Allan / Collin & ALL,

                                       Looking for the search builder as shown above in the beginning of the question or again as attached herewith should be always in these condition even after a search and clear but should be open as normal.

.

Hope you ALL may understand ?

Cheers.

nathanael · June 2021

colin · June 2021

Yep, I understand, it's just not designed for that, I'm afraid. The code is open-sourced, so it's possible that you can adapt it to make it work how you want,

Colin

nathanael · June 2021

Hi All,

         Okay Colin. Thanks for the reply.

I have one more thing to get clarified or a solution.

At this link at http://live.datatables.net/rurofefu/5/edit

Add a

1) Button named "Change ODD Background Color"

and

2) the css at top as

/*
* button odd background-color
*/

table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd.active
{background: #0ff;}

3) the script at bottom as

//button odd background-color

$("#btn").on("click",function(){

$("tr:nth-child(odd)").addClass("active");

});

THE PROBLEM IS IT JUST CHANGE COLOR FOR THE FIRST PAGE ONLY.

Any solution?

varghese

colin · June 2021

It's because you're only changing the row currently in the DOM, i.e. the visible rows. To do it on all pages, either colour on the draw with drawCallback, or colour the nodes through the API with rows().nodes(),

Colin

nathanael · June 2021

Hi Colin & All,

                   I am unable to do it self on the suggested way. Because of the lack of knowledge on this matter.

Any help ?

allan · June 2021

Could you show us what you have tried for the drawCallback option?

Allan

nathanael · June 2021

Hi Allan, Colin and All,

For the above question as follows

Could you show us what you have tried for the drawCallback option?

I don't know how to use the drawCallback option.

But i tried the below two ways

1)

$("#btn").on("click",function(){
   
   var table = $('#example').DataTable();
 
table
    .rows( '.ready' )
    .nodes()
    .to$()      // Convert to a jQuery object
    .removeClass( 'ready' ).addClass("active").data();
});

2)

//button odd background-color

$("#btn").on("click",function(){
   
 var table = $('#example').DataTable();
 
var row = table
    .row( '.odd' )
    .node();
 
$(row).addClass( 'table.dataTable.display tbody tr.odd.active' );

});

and is available at

http://live.datatables.net/rurofefu/8/edit

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

colin · June 2021

Yep, as I said before, you'll need to use drawCallback - there are a few examples on that page on how to use it,

Colin

nathanael · June 2021

Hi Colin, Allan and All,

                                       I try to insert the below code

//button odd background-color

"drawCallback": function( settings ) {

    var api = this.api();

   $('#btn').click( function(){
  console.log( api.rows( {page:'current'} ).addClass( 'table.dataTable.display tbody tr.odd.active' ).data() );

});

},

at

http://live.datatables.net/rurofefu/10/edit

but nothing working.

Any kind help ?

nathanael · June 2021

Hi Colin, Allan and All,

                                      Also try like as follows

//button odd background-color

"drawCallback": function( settings ) {

    var api = this.api();

   $('#btn').click( function(){
  console.log( api.rows('tr.odd').addClass( 'active' ).data() );

});

},

Any kind help ?

colin · June 2021

Here you go : http://live.datatables.net/rurofefu/11/edit

This has taken a few of things you referenced before, and added it all together. You'll see the classes are now being added and removed on all pages.

Hope that does the trick,

Colin

nathanael · June 2021

Hi Collin and All,

                        Thanks for your effort and reply.

But nothing happen on button click at http://live.datatables.net/rurofefu/11/edit ?

Any kind help ?

colin · June 2021

It's adding the classes that you wanted. You can confirm this with the browser's Inspector. What you do with those classes is then up to your code in the CSS, but the code was the part you were asking support for.

Colin

nathanael · June 2021

Hi Colin and All,

                         Not clear.

Sorry.

Any kind help ?

nathanael · June 2021

Hi, All,

          Here at http://live.datatables.net/rurofefu/11/edit

needs to change the odd row colors with the button click.

Any kind help ?

colin · June 2021

As I said before, the code is there - classes are being added so it's up to you to use those classes! I just added class colin which is red, see the end of the CSS pane, and it changed the colour : http://live.datatables.net/rurofefu/16/edit

Colin

nathanael · June 2021

Hi Collin and All,

                            Thanks for your all efforts.

Could you able to clarify the following

1) Why the need of adding a separate class again as it already have a class as "able.dataTable.display tbody tr.odd.active" ?

2) Why the background-color added to the class "tr.colin " is not working at

http://live.datatables.net/rurofefu/17/edit ?

Cheers.

allan · June 2021

1) You don't need to, it was just part of Colin's demonstration.

2) Because the styles are being overridden by other classes - try:

tr.colin td {
  background-color: #0ff !important;
  color: #ff0;
}

Allan

About search builder.

About search builder.

Answers

Howdy, Stranger!

Categories

DataTables

About search builder.

About search builder.

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables