Code Monkey home page Code Monkey logo

Comments (11)

virtualgadjo avatar virtualgadjo commented on September 28, 2024 1

hi again,
found out and, as usual, the problem was behind the bench and the machine not in the library...
the right call is (below the full datatables statement)

$( ctable.table().container() ).on( 'keyup', 'tfoot input', function () {
	ctable.column.search( this.value ).draw();
});

instead of the one i have been using for quite a long time... and, curiously works fine when not server side

well, back again to say i've been a little too enthusiatic, it keeps having problem, i keep digging...
have a nice day

from ignited-datatables.

virtualgadjo avatar virtualgadjo commented on September 28, 2024

you're right, works like a charm and fast
only issue for me, i can't figure out how to have it work with column search/filtering (general sSearch works fine)
it displays the usual processing short "alert" but nothing changes
have a good day

from ignited-datatables.

wrabit avatar wrabit commented on September 28, 2024

The library (Same with this) is hardcoded to process POST requests, but datatables will by default use GET. So make sure in your DataTables init you sent "POST" like:

                .....
	        ajax: {
	        	url: url,
	        	type: "POST"
	        },

You could also check your XHR request log in chrome dev tools and providing you are showing php errors it might reveal something else.

from ignited-datatables.

virtualgadjo avatar virtualgadjo commented on September 28, 2024

hi,
that's what i do but the thing is a little funnier than this... using the latest release of datatables, in order to have my inpus work i use this
$( ctable.table().container() ).on( 'keyup', 'tfoot input', function () {
ctable
.column( $(this).data('index') )
.search( this.value )
.draw()();
});
funny enough, if i comment or retrieve the column() line it "works" but every input works like the main search, searching in all columns data
i've checked if $(this).data('index') was correct and yes, it returns the correct column index

a close look inside the library later i've seen it deals with a columns value in the get_filtering function but not a single column index one so i've tried naming my column data into columns, thinking it could work as a single value array, nope, still have to dig a little big deeper i'm afraid :)

of course, ajax, so i've tried putting this inside the ajax complete function but no more success :) (when the use of tooltips works fine this way)

unfortunately, chrome console doesn't find anything to say :)

i was the way i used the original library with CI 2 (i still have some tools working fine like so) too bad it doesn't work with CI3 but this fork is really fast and works really well except when it comes to column ajax filtering, i'll continue to try and understand why... or more precisely, how i could have it deal with that single column index...

have a nice day

from ignited-datatables.

wrabit avatar wrabit commented on September 28, 2024

Hmm I think you should try and keep to defining searchable columns within the init of the plugin like so and fix the real issue.

Ensure you have XHR requests logging turned on (right click console window). Turn logging threshold for errors and check application/logs for other errors to do with the query. Paste it all up here if you want me to take a look (including Controller side query for the data.

	    $('#tickets-datatable').DataTable( {
	        processing: true,
	        serverSide: true,
	        ajax: {
	        	url: "url",
	        	type: "POST"
	        },
	        columns: [
	        	{
	        		data: 'ticket_created',
		        	searchable: false
		        },
	        	{
	        		data: 'ticket_status',
		        	searchable: false
	        	},
	        	{
	        		data: 'ticket_title',
	        	},
	        	{
	        		data: 'staff_first_name',
	        	},
	        	{
	        		data: 'reply_count',
	        		searchable: false,
	        		orderable: false
	        	},
	        	{
	        		data: 'ticket_last_reply_at',
	        		searchable: false
	        	}
	        ]
	    });


    <table class="table" id="tickets-datatable" width="100%">
        <tr>
            <thead>
                <th>Date</th>
                <th>Status</th>
                <th>Ticket</th>
                <th>Assigned</th>
                <th>Replies</th>
                <th>Last Reply</th>
            </thead>
        </tr>
    </table>

from ignited-datatables.

virtualgadjo avatar virtualgadjo commented on September 28, 2024

just a word to say, of course it's draw() not .draw()(); :)

from ignited-datatables.

virtualgadjo avatar virtualgadjo commented on September 28, 2024

just seen your message, i'll try this instead of my columnDefs declaration, beeing back soon :)

from ignited-datatables.

virtualgadjo avatar virtualgadjo commented on September 28, 2024

nope, doesn't work...
you know, in order to have search inputs in the table footer with the latest releases of datatables you have to use this method (full datatable call

$('#users_list tfoot th').each( function (i) {

	if ( i != 0 && i != 5 && i != 6 )
	{
		var title = $('#users_list thead th').eq( $(this).index() ).text();
		$(this).html( '<input type="text" placeholder="'+title+'" data-index="'+i+'" />' );
	}
});

var ctable = $('#users_list').DataTable({
	"processing": true,
	"serverSide": true,
	"lengthMenu": [[10, 20, 50, 100, -1], [10, 20, 50, 100, "tout"]],
	"pageLength": 20,

	"ajax": {
		"url" : "/mpprivate/users/users_tab",
		"type": "post",
		'complete': function(){
			$('.toollink').tooltip();
		}
	},

	"columnDefs": [
	{ "name": "prenom",    "targets": 1 },
	{ "name": "nom",       "targets": 2 },
	{ "name": "cp_ville",  "targets": 3 },
	{ "name": "pays",      "targets": 4 },
	{ "name": "valide",    "targets": 5 },
	{ "visible": false,    "targets": 0 },
	{ "searchable": false, "targets": [5,6] },
	{ "orderable": false,  "targets": [5,6] }
	],


	"order": [[ 2, "asc" ], [ 1, "asc" ]],
	"language": datatabfr
});

$( ctable.table().container() ).on( 'keyup', 'tfoot input', function () {
	ctable
	.column( $(this).data('index') )
	.search( this.value )
	.draw();
});

and, just to be as complete as possible

  • the global search above the table works fine...
  • i have a few other datatbles in the same app but dealing with less... data :) and thus not working serverside, guess, column search/filter works fine this way
  • last thing that drives me crazy, without this column thing, as i said, footer inputs work but keep searching in all the columns and not in the chosen one

the ajax url does something really simple

public function users_tab()
{
	$this->datatables
	->select('mp2018_user.id, prenom, nom, cp_ville, pays, valide')
	->from('mp2018_user')
	->add_column('voir', '<a href="/contacts/un_contact?idcontact=$1" title="voir / modifier" class="toollink"><i class="far fa-eye fa-lg"></i></a>', 'id');

	$data['result'] = $this->datatables->generate();
	$this->load->view('raw_ajax', $data);
}

anyway, thanks a lot for your help and interest in this funny issue :)

from ignited-datatables.

virtualgadjo avatar virtualgadjo commented on September 28, 2024

forgot to add, i've a lot of datatables with this exact syntax working like a charm in CI 2 with the original Ignited-Datatables library, what make me think the issue is probably in the library, maybe the todo : sRangeSeparator in the get_filtering function :)

from ignited-datatables.

briansulzen avatar briansulzen commented on September 28, 2024

@virtualgadjo Figured something out with this. It could be cleaned up a lot, but this will allow you to use searchCols server side to define a column search alone or in combination with the default datatables search. I pass the $page_filter var via PHP to filter by order status. Hope this helps someone.

In your javascript call:
`
$(document).ready(function() {

	$('#orders').dataTable( {
        dom: '<fp<t>ip>',
        processing: false,
		stateSave: false,
        serverSide: true,
        ajax: {
            url: '<?php echo base_url(); ?>index.php?/orders/list_orders',
            type: 'POST'
        },
		searchCols: [
			{"sSearch": "<?php echo $page_filter; ?>"},null,null,null,null,null,null
		],
        lengthChange: false,
		pagingType: 'full_numbers',
		displayStart: 0,
		pageLength: 100,
		ordering: true,
		order: [[5,"desc"]] ,
		language: {
			'search': 'Search all Columns: '
		},
		// style past due amount cell for account that are in the red.
		// Also disable search on the past amount due column
		columnDefs: [
			{
			    targets: 7,
                render: $.fn.dataTable.render.number( ',', '.', 2),
				createdCell: function (td, cellData, rowData, row, col) {
					if (cellData.substring(0,1) !== '-' && cellData.substring(0,1) != 0){
						$(td).css('color', 'red');
					}
				},
				searchable: false
			},
            {
                // Display the date in more readable format
                targets: 5,
                render: function ( data, type, row ) {
                    var jDate = new Date(row[5]);
                    jDate = jDate.toLocaleString('en-US');
                    return jDate;
                }
            },
            {
				targets: [6,8],
				className: "hide"
			}
		],
		// Style Do Not Ship Customer's row color background
		createdRow: function(tr,data,dataIndex) {
			if(data[6] == '6') {
				$(tr).addClass('error');
			}

			if(data[8] === "Amazon Prime") {
                $(tr).find('td:eq(3)').css({'background-image':'url("template/images/prime_small.png")','background-repeat':'no-repeat', 'background-position':'140px'});
            }
		}

	});
	$('#orders tbody').on('click','tr', function() {
		var order_id = $('td',this).eq(1).text();
		 window.location = '<?php echo base_url(); ?>index.php?/orders/edit_order_entry/'+order_id;
	} );

});

`

Amended Datatables.php get_filtering() method:

`
private function get_filtering() {

    $mColArray	= $this->ci->input->post('columns');

    $sWhere		= '';
    $colWhere = '';
    $colSearch = '';
    $search		= $this->ci->input->post('search');
    $sSearch	= $this->ci->db->escape_like_str(trim($search['value']));
    $columns	= array_values(array_diff($this->columns, $this->unset_columns));

    if ($sSearch != '') {
        for ($i = 0; $i < count($mColArray); $i++) {

            if ($mColArray[$i]['searchable'] == 'true' && !array_key_exists($mColArray[$i]['data'], $this->add_columns)) {

                if ($this->check_cType()) {
                    $sWhere	.= $this->select[$mColArray[$i]['data']]." LIKE '%".$sSearch."%' OR ";

                } else {
                    $sWhere	.= $this->select[$this->columns[$i]]." LIKE '%".$sSearch."%' OR ";

                }
            }
        }
    }

    for ($i = 0; $i < count($mColArray); $i++) {
        $colSearch = $this->ci->db->escape_like_str(trim($mColArray[$i]['search']['value']));

        if ($mColArray[$i]['searchable'] == 'true' && !array_key_exists($mColArray[$i]['data'], $this->add_columns) && $mColArray[$i]['search']['value'] != '') {
             $colWhere .= " AND ".$this->select[$this->columns[$i]]." LIKE '%".$colSearch."%'";

        }

    }

    if ($sWhere != '' && $colWhere != '') {
        $sWhere	= substr_replace($sWhere, '', -3);
        $this->ci->db->where('('.$sWhere.') '.$colWhere);

    }
    else if ($sWhere != '') {
        $sWhere	= substr_replace($sWhere, '', -3);
        $this->ci->db->where('('.$sWhere.')');

    }
    else if ($colWhere != '') {
        $colWhere = substr($colWhere,4);
        $this->ci->db->where($colWhere);

    }

    // TODO : sRangeSeparator

    foreach ($this->filter as $val) {
        $this->ci->db->where($val['key'], $val['value'], $val['escape']);
    }

}

`

from ignited-datatables.

zieru avatar zieru commented on September 28, 2024

hello I'm sorry

I'm using this version but I can't implement #129 this one,

from ignited-datatables.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.