Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all 79321 articles
Browse latest View live

Child rows with editor

0
0

looking at the child row example: https://datatables.net/examples/api/row_details.html

i want to build the same thing, but the child row would again be a datatable with an editor, so i can add/edit/delete rows inside the child row, are there any examples like this as i can seem to make this work.

Maybe i'm making this to complicated but i'm trying to edit a 1 to many relationship, but in the secondary table (the many) we can add rows, and these rows are build out of 5 fields (below is an explanation of the sql tables).

members
- id
- name
- address
- ....

members_year
- id
- member_id
- year
- medical
- payed
- submitted

any help on how to build this would be really handy.


Use htmlentities with editor

0
0

Hi,
For reasons, I need all editor input to go through htmlentities($string,ENT_QUOTES,'UTF-8');
I know I can do it manually and edit each and every one of my fields set function callbacks but this means 100+ fields to go through. is there a way to automatically convert ALL data that is going to the SQL using htmlentities? so that instead of " in the database I will have &qoute;?

Hello,

0
0

@using Resources;

<style>

table.dataTable td:nth-child(7) {
    width: 430px;
    max-width: 430px;
    word-break: break-all;
    white-space: nowrap;
}

</style>

ID @Resource.Name
$(document).ready(function () { var myIP = '@ViewBag.IP'; var table = $("#@ViewBag.DivId").DataTable({ "ajax": { "url": "/api/list/Person?op=" + '@ViewBag.Qs["op"]', "dataSrc": "" }, dom: '<"toolbar">' + '<"top">frt<"bottom"lpi><"clear">', "rowId": "ID", "columns": [ { "data": "ID" }, { "data": "Name" }, { "data": null, "className": "center", "defaultContent": '@Resource.Show' } ], "columnDefs": [ { "targets": [0], "visible": false, "searchable": false } ] }); $('#@ViewBag.DivId').on('click', 'tr', function (evt) { var $cell = $(evt.target).closest('td'); if ($cell.index() == 7) { return; } var rowData = table.row(this).data(); if (rowData && rowData.ID) { var url = "/Detaail/Person/" + rowData.ID; window.location.href = url; } }); Refresh = function () { table.ajax.reload(); } });

columns.data documentation suggestion

0
0

Hi,

I got a little confused by columns.data documentation when data is provided by a function.

The description of type argument from signature data( row, type, set, meta ) is not very informative ("The data type requested for the cell")

I understand type is somewhat of an enum described in the Orthogonal data page, but I had to dig into the forum and cross information to get this.

Couldn't the documentation be updated with something like "The data type requested for the cell as described in Orthogonal data" ?

Filter the list in a combobox

0
0

Hi,
I want to filter the list in a combobox, from a datatable editor. When I use the where condition, I do not have any errors, but it does not return any records.

Editor::inst( $db, 'tb_diccionario' )
->field(
Field::inst( 'tb_diccionario.materia_id' )
->options( Options::inst()
->table( 'tb_materia' )
->value( 'id' )
->label( 'materia' )
->where( 'tb_materia.activo', 1 )
),
Field::inst( 'tb_materia.materia' ),

->leftJoin( 'tb_materia', 'tb_materia.id', '=', 'tb_diccionario.materia_id' )

*Activo es un campo de la tabla materia de tipo tinyint.

Add filter button to column header (specific column)

0
0

Hey there, so I have been looking at adding a button to filter the groups in a column, much like this:
https://datatables.net/examples/api/multi_filter_select.html
However, I want to add the button to the table column header (like where the sort button normally is). I have disabled sort for the column and then I was looking at this: https://datatables.net/reference/button/collection

I do have the Buttons JS included. Am I on the right track/any tips?
Mostly wonder what is the best way to include a custom button to the column header, as I am not 100% sure how to do this with the API.

Creating an attendance register report

0
0

I want to create an attendance register report that looks like this:

The information above the dates is the lesson for that day.

The JSON being returned to the jQuery is:

[{"attId":"120","cdId":"MTQ5","attMeeting":"A","attDate":"2019-01-11","cdSurname":"Achilles","cdFirstName":"Tendon","attDescription":"Cycling","attNewChum":"N"},{"cdId":"ODA=","cdSurname":"Alistair","cdFirstName":"Tricia","attDescription":"Running","attNewChum":"N"},{"cdId":"MTQ5","cdSurname":"Achilles","cdFirstName":"Tendon","attDescription":"Cycling","attNewChum":"N"},{"attId":"121","cdId":"ODA=","attMeeting":"P","attDate":"2019-01-12","cdSurname":"Alistair","cdFirstName":"Tricia","attNewChum":"N"},{"attId":"122","cdId":"MTQ5","attMeeting":"P","attDate":"2019-01-13","cdSurname":"Achilles","cdFirstName":"Tendon","attDescription":"Rowing","attNewChum":"N"},{"attId":"123","cdId":"ODA=","attMeeting":"P","attDate":"2019-01-13","cdSurname":"Alistair","cdFirstName":"Tricia","attDescription":"Rowing","attNewChum":"N"}]

The mySQL that extracts the data has a Left Join so all the names are extracted if there is a date (i.e., you can have a name followed by all columns having blanks).

Is it possible to do this?

Kind regards,

Glyn

Unable to find DataTable count when i search records

0
0

I have used various filters on my data table and I an easily extract the number of rows now the table has using:

var count = $('#myTable').DataTable().data().count();

or just by getting length of the final filtered list.

It does not return right result and stays with the previous result when I search using the search box. Here is my search box implementation:

$('#searchText').keyup(function(){
            table.search($(this).val()).draw();
});

When i use the data().count() after this draw() method. It sticks with previous values.

How can i get the updated table count in this after the search has been performed ?


how to export csv in IE9

0
0

Hello everybody,

This is my first post so thank you in advance for any help that you are able to provide me.

My problem is simple, I need to export my data to .csv format in IE9. The following code works for IE10+ but not IE9. I've spent a day or two looking for a solution as my boss at work requires DataTables to work on IE9 as some of our clients still use that version of the browser.

I've read that you can save to .csv in IE9 but for some reason, I am unable to get the required functionality to work. I'm using Browserstack to test and I'm not getting any errors when I debug in developer tools. I have checked that adobe player is installed as well.

Thanks again.
Daniel

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.css"/>


</head>
<body>
<table class="display" id="example" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</body>
</html>

$(document).ready(function() { $('#example').DataTable({ dom: 'Bfrtip', buttons: [ 'copy','excel','pdf','csv' ] }); });

</asp:Content>

When using Button Collection and ScrollX: true, then dropdown menu is within scroll_Head DIV (issue)

0
0

Okay, so a bit related to: https://datatables.net/forums/discussion/53996/add-filter-button-to-column-header-specific-column#latest

Tried to make a live datatables to display, but unsuccessful (hopefully it gives a understanding of what I want to achieve:
live.datatables.net/taqewezu/5/edit

See this picture for the problem:

The dropdown menu is behind the scrollBody div and only inside the scrollhead.

So I was tempted to to set the CSS:

.dataTables_scrollHead{
    overflow: visible !important;
}

However, when the scroll is active, this happens...:

The dropdown menu is showing, but due to overflowing, the scrollhead is not scrolling.

Anyone have any idea on how to solve this?

Inline edition event after editing

0
0

As the user change a field, I need another field to be updated.
It works well using a listener in the edition form:

$( 'input', editor.field( 'ds_pluv' ).node() ).on( 'change', function (e, d) {
if ( ! d || ! d.editor ) { // Used to be sure change is fired from the form (not inline editing)
editor.field( 'ds_cor_pluv' ).val(true);
}
} );

But when inline editing, this appears not to be working.
Is there any other way to be able to trigger a specific action after inline editing a cell ?

Xavier

Make sometimes hidden fields required

0
0

For the editor that I am using, only certain fields show if they are enabled in the setting page. I am unsure of how to make them required when they aren't hidden. I've tried on the editor have the attr part and make the field required set to true, however it doesn't seem to do anything as I can leave it empty and it still submits the values to the database. Its only in the server side script when I use a validator::notEmpty it makes it required. However it should validate only when the field isn't empty. Is there a way in the server side script to check what the field type is?

Date Search

0
0

Hi Everyone,

I would like to know if there is a way we can search rendered dates, here is my code with Date column Hire Date.

'columns': [ { data: 'emp_no' }, { data: 'first_name' }, { data: 'last_name' }, { data: 'gender' }, { data: 'hire_date', "render": function (data) { var dateObj = new Date(data); var month = ('0' + (dateObj.getMonth() + 1)).slice(-2); var date = ('0' + dateObj.getDate()).slice(-2); var year = dateObj.getFullYear(); //var shortDate = year + '/' + month + '/' + date; return (date + '/' + month + '/' + year); }

Any suggestion is highly appreciated.

How to change pagination HTML?

0
0

When I have multiple pages on pagination both ellipses have the same ID id="blabla-table_ellipsis" , Im trying to get rid of one of those IDs, or to remove both IDs, but im not sure which event or method would be the best way to do that.

Adding bootstrap tooltip to field label in editor

0
0

I've been trying to incorporate the bootstrap tooltip into the editor field's label for an upload field so that the users can know what type of file to use. However I'm running into the issue of calling the tooltip method. I've tried placing the function is almost all places in the document. At this point I'm clueless as to where or how to call this function to get the tooltips turn on. This is the code for the editor.

[code]
editor = new $.fn.dataTable.Editor({
ajax: '../models/user_adminCue_models.php',
//dataType: 'json',
table: '#users_cues',
fields: [ { label: "Cue Audio Upload <i id = \"AudioTT\"data-toggle=\"tooltip\" title=\"Supported upload types: .mp3, .wav\" class=\"fas fa-info-alt\"></i><span class='red-text'>*</span>",
name: "users_cues.CueAudioURL",
type: "upload",
clearText: 'Remove file',
attr:{
required: true
},
dragDrop: false,
display: function (val,row) {
return "<a href=\""+val.replace("..","../MAMRT")+"\">"+val.substring(val.indexOf("/",3)+1,val.length)+"</a>";
}

  },
  { label: "Cue Image Upload <span class='red-text'>*</span><i id = \"ImageTT\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Supported upload types: .mp3, .wav\" class=\"fas fa-info-alt\"></i> ",
    name:  "users_cues.CueImageURL",

    type: "upload",
    clearText: 'Remove file',
    attr:{
      required: true
    },
    dragDrop: false,
             display: function (val,row) {
              return "<a href=\""+val.replace("..","../MAMRT")+"\">"+val.substring(val.indexOf("/",3)+1,val.length)+"</a>";
     }
  }

]
});
[/code]


How to search Row Details

0
0

I'm setting up a table and using the Row details to show a lot more information that is available in the visible columns. The row data and the details data are coming from REST calls and are available when the table is presented to users -- no additional calls or anything fancy when the details row is displayed.

I've also got the search set up and it is working, but my users need to be able to search the contents of the details row as well. I would like to integrate that into the basic search -- that is I would prefer not to create another search mechanism.

Is there a way out of the box to include all the row data in the search?

One thought I had was adding a hidden searchable column to the table. There are about 15 to 20 different pieces of data in the details display so that could get messy.

Any other ideas how to do this?

Sanitize value before running validation

0
0

As a general expected behavior in the application, user input needs to run through a conversion (common routine/fxn) to remove white-space (aka. trim) and convert to uppercase before running any business logic/validation. Unless specified otherwise, the final saved value will be uppercase with leading/trailing white-space removed. We are expecting this behavior as a editor level.

Slow loading of tables

0
0

I have a very large train timetable schedule and it is taking more than 5 seconds to load and process. Any tips on how to improve the speed on this? Does anyone have any tips on profiling and where to identify areas to improve? I'd appreciate any help and guidance on this. Thank you!!

Email button pdf

0
0

I would like to add a button to to the datatable buttons called Email which when clicked would prompt for an email address and then call the pdf creation like the pdf button does and then do an ajax call to the server with the pdf. On the server I would save the pdf and then email it. I know how to do the server side, but need help with creating a custom button, adding a prompt for the email ( I can do the prompt, just need a function call) and then then code to create the pdf and send it via ajax.

I think this could be super useful and have seen several request for things like this, but this implementation to me makes the most sense. I am just way over my head with how datatables works to implement this.

How To Delete Multiple Rows In DataTable

0
0

Hi, I am using DataTables Editor.

When I select multiple checkboxes to delete, from frontend it's working fine but on the server side, I only get one value.

Sample output : data[16][vehicle_number]

Viewing all 79321 articles
Browse latest View live




Latest Images