django-datatable-view icon indicating copy to clipboard operation
django-datatable-view copied to clipboard

Passing options for a particular column to the client side?

Open doganmeh opened this issue 9 years ago • 6 comments

Is it possible to add/override column specific options that go to the client side? Such as column width or render?

If not, I think this would be a good candidate for the next major release.

doganmeh avatar Sep 28 '16 21:09 doganmeh

There are a couple of options, but right now none are as direct as a kwarg to the Column constructor. I need to allow attributes so that you have some power of it. Without that, there isn't a clean way to just subclass the Column and allow the keyword, since all of the built-in columns we provide wouldn't benefit from it.

The ways to handle this right now are to leverage css rules targeting th[data-name="column-name-slug"], or to use the table's javascript initialization step to send arbitrary other datatables.js options.

Although specifying client-side JS actions on the Django side of things is awkward, it's still on my radar to find a solution that doesn't require the developer to manage html, css, and python just for this kind of thing.

render is not familiar to me, given that I only nominally brought this package up to speed for datatables.js 1.10, but I will look at it to see if there's something this package can do to offer better support than sending you to the js initialization hook.

tiliv avatar Sep 28 '16 22:09 tiliv

since all of the built-in columns we provide wouldn't benefit from it.

Why not? being able to set column width might be needed once in a while for any column, I think..

or to use the table's javascript initialization step to send arbitrary other datatables.js options

Do you mean, something along these lines:

datatableview.initialize($('.datatable'),  {
  "columnDefs": [
    { "width": "20%", "targets": 0 },
    { "width": "30%", "targets": 0 },
    { "width": "10%", "targets": 0 }
  ]
} );

Would this work?

doganmeh avatar Sep 28 '16 22:09 doganmeh

If that works, in a similar fashion, I should be able to do this as well:

datatableview.initialize($('.datatable'),  {
  "columns": [
    { },
    { },
    { "render": my_function }
  ]
} );

In that case, I just need to be able to guestimate which field goes where.

doganmeh avatar Sep 28 '16 22:09 doganmeh

since all of the built-in columns we provide wouldn't benefit from it.

Why not? being able to set column width might be needed once in a while for any column, I think..

I agree, I just mean that subclassing Column doesn't help all of the existing subclasses of Column, so you would have to subclass all of those instead. There's no technical reason why you can't do this, but it's far from ideal.

You are correct concerning the JS initialize hook. Our initialize() method adds its own aaSorting and aoColumns (since this originated before the new api). I think using columns will preempt aoColumns, which might make some of our automatic behaviors vanish unless you reproduce them in columns. This will definitely have to be updated for the release.

tiliv avatar Sep 28 '16 22:09 tiliv

I see.

doganmeh avatar Sep 28 '16 22:09 doganmeh

The initialize() method doesn't seem to apply the options object. :/

<script type="text/javascript">
    $(function() {
        
        var dtOpts = {
                "lengthMenu": [[20], ["20"]],
                "colummns": [ 
                    {'width': '200px', "data": "date", "name": "date", "render": function(d, t, r, m) { console.log(d); return("xxx"); }},
                    {'width': '10%'},
                    {'width': '10%'},
                    {'width': '10%'},
                    {'width': '10%'},
                    {'width': '10%'},
                    {'width': '10%'},
                    {'width': '10%'},
                    {'width': '10%'}
                  ],
                "dom": ''
            };
            
        var dt = datatableview.initialize($(".dataTable"), dtOpts);
            
        console.log("store-daily-data initialized");
    });
</script>

n6151h avatar Mar 24 '20 01:03 n6151h